vue之element-ui文件上传

对于文件上传，实际项目中我们的需求一般分为两种：

1. 对于单个文件的上传，直接上传到服务器；

官网api：http://element-cn.eleme.io/#/zh-CN/component/upload

js：

uploadimage(item) {
      let formData = new FormData();
      let file = item.file;
      formData.append('file', file);
      uploadImg(formData).then(res => {
        this.bannerRuleForm.imageUrl = res.data.url;
      });
    },
beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
handleAvatarSuccess(res, file) {
      this.bannerRuleForm.imageUrl = URL.createObjectURL(file.raw);
    },

2. 和表单一起通过FormData  上传；

                    
                        添加文件
                    
                    

                        
                            {{ item.name }}
                            
                        
                    
                

js：

// 文件超出个数限制时的钩子
                exceedFile(files, fileList) {
                    this.$message.error('只能选择1个文件');
                },
                //上传文件让第二次覆盖第一的文件
                handleChange(file, fileList) {
                    this.ruleForm.file = file.raw;
                    this.drawerFileList = fileList;
                },
                delete_drawerFileList(i) {
                    this.drawerFileList.splice(i, 1);
                },
                uploadFileDrawer(params) {
                    console.log(params, '00000');
                    let formData = new FormData();
                    formData.append('file', params.file);
                },
                submitForm(formName) {
                    let that = this;
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {
                            if (this.drawerFileList.length == 0) {
                                this.$message.error('请上传附件');
                                return;
                            }
                            let formData = new FormData();
                            formData.append('file', this.ruleForm.file);
                            formData.append('fileVersion', this.ruleForm.fileVersion);
                            
                            

                            that.inSubmit = true;
                            appApi.save(formData, function (res) {
                                that.inSubmit = false;
                                if (res.status != 200) return;
                                const response = res.response;
                                if (response.code !== 0) {
                                    that.$message.error(response.msg);
                                    return;
                                }
                                that.$message.success(response.msg);
                                that.cancel();
                            });
                        } else {
                            console.log('必填项未填完');
                            return false;
                        }
                    });
                },