vuetify文件上传 file inputs
html部分代码<v-formref="uploadFileForm"v-model="uploadFormValid"><v-file-inputv-model="fileInfo"required:rules="[v => !!v || '文件必选']"show-size accept=".xls,.xlsx"@ch
·
html部分代码
<v-form
ref="uploadFileForm"
v-model="uploadFormValid">
<v-file-input
v-model="fileInfo"
required
:rules="[v => !!v || '文件必选']"
show-size accept=".xls,.xlsx"
@change="uploadFile"
:disabled="loading.uploadIsLoading"
:loading="loading.uploadIsLoading"
label="点击选择文件,文件格后缀为:.xls、.xlsx"></v-file-input>
</v-form>
js
1.
// 上传文件方法
uploadFile() {
// console.log(this.fileInfo, '文件信息');
if (this.$refs.uploadFileForm.validate()) {
this.loading.uploadIsLoading = true;
var formData = new window.FormData();
formData.append('file', this.fileInfo);
collectorImport(formData).then(res => {
this.loading.uploadIsLoading = false;
this.$refs.notify.show("文件上传成功", {timeout: 1000, color: 'success'});
this.uploadDialog = false;
this.search();
}).catch(err => {
this.loading.uploadIsLoading = false;
});
}
},
//collectorImport 是封装的ajax方法,不管用什么ajax请求方法,主要是设置请求头'Content-Type': 'multipart/form-data'
collectorImport(data){
return request({
url:'/db/collector/collector-import',
method:'post',
data,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
2
// 上传文件方法
uploadFile(value) {
// console.log(this.fileInfo, '文件信息');
if (this.$refs.uploadFileForm.validate()) {
// this.loading.uploadIsLoading = true;
var formData = new window.FormData();
formData.append('file', value);
debugger
this.collectorImport(formData)
}
},
//collectorImport 是封装的ajax方法,不管用什么ajax请求方法,主要是设置请求头'Content-Type': 'multipart/form-data'
collectorImport(data){
const ths = this;
httpDefaultMsgUtil.post(
"api/Management/Upload",
data,
{'Content-Type': 'multipart/form-data'},
ths,
(sucess) => {
//
alert(sucess.data.message);
const ths = this;
const fieldsSetting = ths.gridLayoutFieldSettingArray;
const getFieldObjFn = gridLayoutUtil.getGridLayoutFieldSettingForFieldObj;
const fieldObj = getFieldObjFn(fieldsSetting, "头像");
fieldObj.value="http://localhost:21021/uploads/images/1.jpg";
}
);
}
更多推荐
已为社区贡献1条内容
所有评论(0)