vue el-upload 以formData传递二进制文件

DOM

<el-upload
          class="upload-demo"
          drag
          ref="upload"
          multiple
          :fileList="fileList"
          :auto-upload="false"
          :on-change="handleChange"
          :on-remove="handleRemove"
          action=""
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

JS

<script>
export default {
data() {
      return {
        form:{},
        fileList: [],
      };
    },
}
methods: {
	handleChange(file, fileList) {
        this.fileList = fileList;
        this.form.importParams = this.fileList;
      },
      handleRemove(file, fileList) {
        this.fileList = fileList;
        this.form.importParams = this.fileList;
      },
      // 保存前处理数据
      addBefore() {
        let format = new FormData();
        // 这里取了一条数据,多个文件需多次添加
        format.append("file", this.form.importParams[0].raw);
        format.append("protocol", this.form.protocol);
        format.append("priority", this.form.priority);
        format.append("registType", this.form.registType);
        format.append("esbUser", this.form.esbUser);
        this.form = format;

        console.log(this.form, "新增的数据");
      },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

接口定义：

踩坑点一定要以data传递,不能使用params，否则formData不生效

import request from '@/router/axios';
export const add = (data) => {
    return request({
		url: '/xxx/xxx',
		method: 'post',
        data, // 正确传递
        // params: data, // 错误传递,不可用
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
	});
  }
1
2
3
4
5
6
7
8
9
10