使用 FormData 和 XmlHttpRequest 在节点 js 后端上使用 Formidable 上传文件显示空文件、字段

Question

我正在使用 FormData 和 XmlHttpRequest 上传一个 csv 文件。这是它的代码。我有一个围绕 html 输入类型文件的表单，我正在执行此代码的 onchange 事件。我也尝试过直接发送表单，并将表单元素读入 FormData object.

      let formData = new FormData();
      let file = e.target.files[0];
      var blob = new Blob([file],{type: 'text/csv'});
      formData.append("payoutUpload", blob, 'processed.csv');

      let uri = encodeURI(`${window.serviceUri}${path}`);

      var req = new XMLHttpRequest();
      req.onload = (result) => {
        if (req.status === 500 && result && result.code === 'ECONNRESET') {
          console.log(
            'Connection was reset, hence retry the sendRequest function'
          );
        } else if (req.status === 200) {

        } else {
          console.log("Error while retrieving data");
        }
      }
      req.onerror = (e) => {
        console.log('There was an error while retrieving data from service', e);
      };
      req.open('POST', uri, true);
      req.setRequestHeader('Content-Type', 'multipart/form-data');
      req.setRequestHeader('Authorization', 'Bearer ' + token);
      req.send(formData);

当我发送请求时，我可以看到文件正在以 Request Payload 的形式发送。

在 NodeJs 后端，我运行 Express and Formidable。我没有使用 body-parser，我使用的是 express 内置的 json 和 urlencoding 方法。

下面是最厉害的部分。

const form = formidable({multiples: true});
form.parse(req, (err, fields, files) => {
    console.log(`error is ${JSON.stringify(err)}`);
    console.log(`fields is ${JSON.stringify(fields)}`);
    console.log(`files JSON: ${JSON.stringify(files)}`);
    console.log('file in request: ' + files.payoutUpload);
    console.log(`req.body: ${req.body}`);
    options.file = files.payoutUpload;
});

我收到错误消息，字段和文件为空。我搜索了所有类似的问题并正确设置了请求 headers（这通常是问题所在）。我可以看到 request.body 在服务器端仍然有文件负载。但是强大的不解析这个。谁能告诉我做错了什么？

更新：我已经尝试过其他包来解析文件，比如 multer，express-fileupload，所有这些 return 文件都是空的。我也试过 fetch API 来发送我的请求，但没有成功。

Answer 1

req.setRequestHeader('Content-Type', 'multipart/form-data')

当您发送 multipart/form-data 时，您必须在 header 中包含一个 boundary 参数，但是您不能知道你需要为此设置什么值。

根本不要设置Content-Typeheader。允许 XMLHttpRequest 从 FormData object.

自动生成它

使用 FormData 和 XmlHttpRequest 在节点 js 后端上使用 Formidable 上传文件显示空文件、字段

Uploading file with FormData and XmlHttpRequest with Formidable on node js backend shows empty files, fields

javascript

xmlhttprequest

node.js

formidable

fetch-api