表单与附件上传

工具：vue+elementUI(upload组件)
要求：熟悉elementUI的uplaod组件及其特性

Get请求单文件上传

get请求文件上传非常简单，写好action和data即可。

<el-upload ref="upload" action="你上传的地址" data="uploadData(你给后端的传参)" :auto-upload="false">
  <el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFile">上传文件</el-button>

注意：data只接受object，该属性会将obj转换为对应的参数拼接string类型。
上传方式是以elementUI封装好的默认上传方式，调用其定义好的方法即可。

submitFile() {
  this.$refs.upload.submit();
}

Post请求多文件上传

此处用到了FormData，不了解的同学可以进入此处了解 FormData使用详解

<el-upload 
  ref="upload" 
  action="" 
  accept=".jpg, .jpeg, .png"
  :http-request="postUpFile(自定义上传方式)" 
  :on-change="handleFileChange"
  :file-list="fileList" 
  :auto-upload="false" 
  multiple>
  <el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFile">上传文件</el-button>

注意：http-request为自定义上传方式，但action为必填项

data() {
  return {
    fileList: [], // 选取后的文件数组
    formData: '', // 给后端传的文件流与表单参数
    uploadData: {} // 表单数据
  };
},
computed: {
  uploadData: {}
},
methods: {
  // 改变文件，对文件的校验
  // 此处举例只能上传图片
  handleFileChange(file, fileList) {
    let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1); // 取到后缀名
    constextension = testmsg === 'jpg';
    const extension2 = testmsg === 'png';
    const extension3 = testmsg === 'jpeg';
    const isLt2M = file.size / 1024 / 1024 < 1;    //这里做文件大小限制
    if (!extension && !extension2 && !extension3) {
      this.$message({
        message: '上传文件只能是jpg/jpeg/png格式!',
        type: 'warning'
      });
      fileList.splice(0, fileList.length); // 删除掉当前上传的错误文件
    } else if (!isLt2M) {
      this.$message({
        message: '上传文件大小不能超过 1MB!',
        type: 'warning'
      });
      fileList.splice(0, fileList.length); // 删除掉当前上传的错误文件
    }
  },
  // 自定义上传方式
  postUpFile(param) { 
    this.formData = new FormData(); // 自定义一个新的FormData
    this.formData.append('file', param.file); // 将文件流添加到formData中
  },
  // 上传
  submitFile() {
    this.$refs.upload.submit(); // 调用自定义上传方式，一定要在调接口之前调用
    let uploadDataStr = JSON.stringify(this.uploadData); // 看后端的接收方式，此处举例：接收String格式
    this.formData.append('data', uploadDataStr);
    //调接口将this.formData传给后台即可
  }
}

注意：elementUI封装的自定义上传方法中，其并不是多文件一起添加到'file'中，而是一个个添加的，若想将调用接口的方法放在此方法中，请做好点击一次调多次接口的准备（此处大坑！注意安全！）

自此，本文就结束了。大家互相学习，有错误或者更好的方法请留言，谢谢大家~
参考链接：
原生formdata附件与表单上传
vue+axios+elementUI文件上传与下载