使用 axios 在 POST 多部分/表单数据请求中发送文件和 json

Question

我正在尝试在同一个多部分 POST 请求中将一个文件和一些 json 发送到我的 REST 端点。请求是使用 axios 库直接从 javascript 发出的，如下面的方法所示。

 doAjaxPost() {
    var formData = new FormData();
    var file = document.querySelector('#file');

    formData.append("file", file.files[0]);
    formData.append("document", documentJson);

    axios({
        method: 'post',
        url: 'http://192.168.1.69:8080/api/files',
        data: formData,
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (response) {
        console.log(response);
    });
}

但是，问题是当我在网络选项卡中检查 chrome 开发人员工具中的请求时，我发现没有 Content-Type 字段 Content-Type document ，而 file -6d4709 字段 --- 是 application/pdf （我正在发送一个 pdf 文件）。

在服务器上 Content-Type 对于 document 是 text/plain;charset=us-ascii 。

更新：

我设法通过邮递员发出了正确的请求，将 document 作为 .json 文件发送。虽然我发现这只适用于 Linux/Mac。

原文由 pavlee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要设置内容类型，您需要传递一个类似文件的对象。您可以使用 Blob 创建一个。

 const obj = {
  hello: "world"
};
const json = JSON.stringify(obj);
const blob = new Blob([json], {
  type: 'application/json'
});
const data = new FormData();
data.append("document", blob);
axios({
  method: 'post',
  url: '/sample',
  data: data,
})

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试这个。

 doAjaxPost() {
    var formData = new FormData();
    var file = document.querySelector('#file');

    formData.append("file", file.files[0]);
    // formData.append("document", documentJson); instead of this, use the line below.
    formData.append("document", JSON.stringify(documentJson));

    axios({
        method: 'post',
        url: 'http://192.168.1.69:8080/api/files',
        data: formData,
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (response) {
        console.log(response);
    });
}

您可以在后端解码这个字符串化的 JSON。

原文由 Fullstack Engineer 发布，翻译遵循 CC BY-SA 4.0 许可协议