Vue.js中向FormData追加文件与数据异常：仅文件可被后端接收

嘿，我一眼就瞅出你代码里的问题啦！你在使用FormData.append()的时候搞错了参数用法～

错误原因 #

你写的form.append('pics', file, cat);里，第三个参数cat其实是FormData用来指定上传文件的文件名的，不是用来传递额外数据字段的。所以后端只能接收到名为pics的文件，而categ的值根本没被当作独立字段传进去。

正确的写法 #

你需要把文件和额外数据分开，用两次append方法分别添加到FormData里：

// 方法中的代码修正后：
var form = new FormData();
var file = this.file;
var cat = this.categ;
// 单独添加文件
form.append('pics', file);
// 单独添加categ字段
form.append('categ', cat);

axios.post('/api', form, { 
  headers: { 'Content-Type': 'multipart/form-data' } 
}).then(res => console.log(res));

这样后端就能同时接收到pics文件和categ字段的值啦！

另外补充个小细节：其实axios在发送FormData的时候，会自动设置正确的Content-Type（包含boundary），你可以不用手动设置这个头，有时候手动设置反而可能出问题，不过保留也没关系，看你习惯～

内容的提问来源于stack exchange，提问作者banky