vue+elementui文件上传以及校验提示
好记性不如烂笔头,还是老实记录下。我这边上传文件是统一通过表单提交上去,不是单独上传文件。所以用var formdata = new FormData(); 对象来上传表单以及文件。其中的一个需要上传的文件,(目前只能上传一个)。<el-form-item label="导入资产表:" :label-width="formLabelWidth1"
·
好记性不如烂笔头,还是老实记录下。
我这边上传文件是统一通过表单提交上去,不是单独上传文件。所以用var formdata = new FormData();
对象来上传表单以及文件。
其中的一个需要上传的文件,(目前只能上传一个)。
<el-form-item label="导入资产表:" :label-width="formLabelWidth1" prop="uploadMaterialFile">
<el-upload ref="uploadMaterialFile" action="" :on-change="uploadChange" :auto-upload="false" >
<el-button type="primary" size="mini">上传</el-button>
</el-upload>
</el-form-item>
on-change对应的方法以及表单rules验证的方法
uploadChange:function(file,filelist){
if(filelist.length && filelist.length >=1 ){
/**引用对象然后验证表单域-这个可以清除上一步不通过时的提示*/
this.$refs.formMap.validateField('uploadMaterialFile');
}
if(filelist.length>1){
filelist.splice(0,1);
}
this.$refs.uploadMaterialFile.$el.children[0].children[1].value = "";
},
/* 表单验证的方法**/
validateFile: function (rule, value, callback) {
if (!this.$refs.uploadMaterialFile.uploadFiles.length) {
callback(new Error('请选择要上传的文件'));
// } else if (this.$refs.uploadMaterialFile.uploadFiles.length > 1) {
// callback(new Error('每次上传只支持一个文件'));
} else {
var regx = new RegExp("(.xlsx)$|(.doc)$|(.docx)$|(.xls)$");
/**这里有个坑,单文件上传,第一次上传错误格式接着上传第二次格式,列表中数组值有两个*/
if (!regx.test(this.$refs.uploadMaterialFile.uploadFiles[this.$refs.uploadMaterialFile.uploadFiles.length-1].name)) {
callback(new Error('文件格式只支持xlsx、doc、docx、xls'));
}
callback();
}
},
在表单rules中需要 uploadMaterialFile:[{validator: this.validateFile}],
最后在提交中使用formdata提交
saveCheckOper(){
var self = this;
this.$refs.formMap.validate((valid) => {
if (valid) {
var formData = new FormData();
formData.append("formMap", JSON.stringify(this.formMap))
for(let i = 0;i < this.$refs.uploadMaterialFile1.uploadFiles.length;i++){
// formData.append("uploadFiles[]", typeof this.WebData[i].uploadFile == 'string' ? noChangeFile : this.WebData.uploadFile ? this.WebData[i].uploadFile : emptyFile)
formData.append("file", this.$refs.uploadMaterialFile1.uploadFiles[i].raw)
formData.append("fileName", this.$refs.uploadMaterialFile1.uploadFiles[i].name)
}
formData.append("assetFile", this.$refs.uploadMaterialFile.uploadFiles[0].raw)
formData.append("assetFileName", this.$refs.uploadMaterialFile.uploadFiles[0].name)
this.loading = true;
this.$fetch.addSafeCheck(formData).then((resp) => {
if (resp.data.returnCode == "0") {
// self.dialogFormVisible = false;
this.closeCheckOperDialog();
self.search();
self.$message.success('操作成功')
}
this.loading = false;
}, (error) => {
console.log(error);
this.loading = false;
})
}
})
},
更多推荐
已为社区贡献16条内容
所有评论(0)