前端使用axios怎么在同一个接口同时上传文件与json数据

966 阅读1分钟

上传文件一般使用FormData,并指定Content-Type为multipart/form-data
上传json一般要指定Content-Type为application/json
因此同时上传json与文件需要同时指定两者,具体代码如下

const formData = new FormData();
// 将文件添加到 FormData 中,使用 "file" 作为键
formData.append('file', file);
// 将 JSON 数据添加到 FormData 中,使用 "data" 作为键, 创建一个Blob对象,并指定type
// 注意:Blob对象的构造函数首位为数组,将自己的数据转为json包到数组里
formData.append('data', new Blob([JSON.stringify({taskName: "1111"})], {type: "application/json"}));

// 发送 POST 请求
const response = await axios.post(url, formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
});

使用chrome发送请求后,控制台如下

image.png

image.png