vue+elementui文件上传以及校验提示

好记性不如烂笔头，还是老实记录下。

我这边上传文件是统一通过表单提交上去，不是单独上传文件。所以用var formdata = new FormData(); 对象来上传表单以及文件。

其中的一个需要上传的文件，（目前只能上传一个）。

                                
                                     上传
                                
                            

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;
                })
            }
                    
            })       
        },