FormData上传文件、对象以及对于上传文件与对象多参数的解决

结合element的 el-upload组件上传文件，前端使用FormData 传输二进制文件。

FormData主要作用：网络请求中处理用来异步的上传文件

1、上传单个File文件

<template>
  <div id="app">
    <div class="upload">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :auto-upload="false"
        :on-change="onChange"
        :on-remove="onRemove"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-button size="medium" @click="upload">上传</el-button>
    </div>
  </div>
</template>

<script>
import UploadApi from '@/api/upload.js';
export default {
  name: 'FormData',
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    onChange(file, fileList) {
      this.fileList = [];
      this.fileList.push(file.raw);
    },
    onRemove() {
      this.fileList = [];
    },
    upload() {
      const formData = new FormData();
      formData.append('file', this.fileList[0]);
      // 请求服务端接口
      UploadApi.formData(formData)
        .then((res) => {
          this.$message.success(res);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

2、上传多个文件

FormData对象的set()方法和append()方法比较，set()方法指定的键如果存在，会使用新值覆盖原来的值，而append()方法会把新值添加到已有值集合的后面4

 methods: {
    onChange(file, fileList) {
      this.fileList = []
      this.fileList.push(file.raw)
    },
    onRemove() {
      this.fileList = []
    },
    upload() {
      const formData = new FormData()
      // FormData的属性值中已存在对应的属性值不会被覆盖，而是会将这个新值添加到已有集合的后面
      this.fileList.forEach(file => {
        formData.append('file', file) // 注意上面fileList存的值是file还是file.raw，需要raw
      })
      
      // 请求服务端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }

3、上传file文件和其他数据（包含对象） 

upload() {
      const formData = new FormData()
      // 文件
      formData.append('file', this.fileList[0])
      // 单个变量
      formData.append('time', this.time)
      // 对象（逐个添加）
      formData.append('obj.name', this.obj.name)
      formData.append('obj.month', this.obj.month)
      // 对象（遍历添加）
      for(const key in this.obj) {
        formData.append(`obj.${[key]}`, this.obj[key]);
      }

      // 请求服务端接口
      UploadApi.formData(formData).then(res => {
        this.$message.success(res)
      }).catch(err => {
        this.$message.error(err)
      })
    }

4、同时上传file文件和整个对象（非逐个添加）

注意：上传文件的请求头和上传一般对象的请求头不一样，后端接收的方式也不同，本次需求后端应该根据上传文件选择@RequestParam进行接收，并把接收到的json字符串转换成对应对象，否则会报错。

另外需要注意的是，formdata的append会把一般的对象转成字符串，所以我们提前使用JSON.stringify进行json字符串的转换。

const formData = new FormData()
// 文件
formData.append("file", this.fileList[0])
// 一般对象
formData.append("objForm",JSON.stringify(this.objForm))

// 请求服务端接口
UploadApi.formData(formData).then(res => {
   this.$message.success(res)
}).catch(err => {
   this.$message.error(err)
})