在项目当中需要发送文件并且传递参数给后端的方法。

当我们需要传递文件都服务器的时候，一般都会使用一个formData对象，并且调用其append方法，已一种键值对的方式添加到formData对象当中。代码如下：

let file = this.$refs.fileRefs.files[0];
var form = new FormData();
form.append("file", file);
this.$ajax({  // $ajax是将axios挂载到vue全局上
    url: "url",
    method: "post",
    data: form,
}).then((res) => {});

如果在传递多参数的时候使用的方式如下，就会导致传给后端的文件字段变成一个{}空对象。以下这种写法是错误的!!!

let file = this.$refs.fileRefs.files[0];
var form = new FormData();
form.append("file", file);
this.$ajax({  // $ajax是将axios挂载到vue全局上
    url: "url",
    method: "post",
    data: {
    	file: form,
    	id: 123
    },
}).then((res) => {});

正确写法如下：

let file = this.$refs.fileRefs.files[0];
var form = new FormData();
form.append("file", file);  
form.append("id", 123);

this.$ajax({  // $ajax是将axios挂载到vue全局上
    url: "url",
    method: "post",
    data: form
}).then((res) => {});

这里append传入的key的取值是由后端决定，例如后端要求传递的字段名为file，我们在这里也必须保持一致