如何使用 Fetch API 上传文件并包含 JSON 数据？答案

【问题标题】：How can I upload file and also include JSON data with Fetch API?如何使用 Fetch API 上传文件并包含 JSON 数据？
【发布时间】：2021-11-06 05:58:35
【问题描述】：

希望你今天过得愉快。所以我使用 Fetch API 将文件上传到服务器，但我也想为我的后端包含一个字符串作为 JSON。但我做不到。

现在这就是我的上传文件功能的样子。如果我只想上传一个文件而不是将字符串包含为 JSON，这将非常有效：

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

使用 req.files.data 在我的 NodeJS 后端获取文件；

但是，如果我包含一个字符串作为 JSON 并尝试上传文件，那么我的 NodeJS 后端会出现未定义的情况。这就是字符串作为 JSON 的样子：

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: {
                file: formData,
                str 
          }
    });
    
};

uploadFile();

现在，如果我想在后端获取文件：

req.files.file，我得到undefined。

req.body，我得到{ 'object Object': '' }。

req.files.data，我得到UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined。

req.body.data，我得到undefined。

这里出了什么问题？

【问题讨论】：

您将其附加到表单数据，而不是正文
formData.append( 'str', '["some JSON here"]' );
你们太棒了。有效。我应该选择你的哪个答案？

标签： javascript jquery node.js express fetch-api

【解决方案1】：

你将它附加到FormData，而不是正文

const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );
    formData.append( 'str', str );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

【讨论】：

【解决方案2】：

只需将值附加到 FormData 对象，就像您对文件所做的一样

formData.append( 'str', '["some JSON here"]' );

然后继续发送那个对象，body: formData

【讨论】：