使用 axios 在 POST multipart/form-data 请求中发送文件和 json

IT技术 javascript json file axios multipartform-data
2021-03-03 01:10:30

我试图在同一个多部分 POST 请求中向我的 REST 端点发送一个文件和一些 json。该请求是使用 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字段 for document，而 forfile字段Content-Type是application/pdf（我正在发送一个 pdf 文件）。

请求显示在网络检查器中

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

更新：

我设法通过 Postmandocument以.json文件形式发送正确的请求。虽然我发现这仅适用于 Linux/Mac。

3个回答

要设置内容类型，您需要传递一个类似文件的对象。您可以使用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,
})
@ElectRocnic — 整个答案是关于在内存中生成 JSON 文件并附加它。我没有重复从文件输入读取文件的逻辑，因为问题与此无关（并且证明这一点的代码已经在问题中）。
2021-04-22 01:10:30
很有用。谢谢。在服务器上，如何解压“文档”？我看到 blob 和文件都被上传了。我不想上传 blob。我只需要解压“文档”。我如何做到这一点？
2021-04-23 01:10:30
你在哪里附加文件在这里？此代码示例中是否缺少它？
2021-04-24 01:10:30
这么长时间以来，我在任何地方都找不到解决方案，而您几乎立即就得出了正确答案。非常感谢你！:)
2021-04-28 01:10:30
谢谢，反正我已经运行了。唯一缺少的一行是formData.append("file", file)我添加的，它对我有用:)
2021-05-17 01:10:30

试试这个。

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。

但后端接收 blob 作为对象字符串，如“[object Object]”。
2021-04-26 01:10:30

您只需要在您的请求中添加正确的标头

axios({
  method: 'post',
  url: 'http://192.168.1.69:8080/api/files',
  data: formData,
  header: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
          },
    })
这将覆盖多部分数据的 Content-Type，丢弃边界参数并破坏服务器解析它的能力。它不会对该多部分数据的“文档”部分的 Content-Type 产生任何影响。
2021-05-08 01:10:30
是的，正是在请求中，当应该有 multipart/form-data 时，它是书面的 text/plain
2021-05-12 01:10:30
我的标题字段已经正确设置。问题出Content-Type在有效载荷上。
2021-05-15 01:10:30
其它你可能感兴趣的问题
上一篇图片的 JavaScript 加载进度 下一篇如何全局替换 JavaScript 字符串中的正斜杠？