我如何上传文件，还包括JSON数据与Fetch API?

Question

希望你今天过得愉快。所以我使用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();

在我的NodeJS后端与req.files.data获取文件;

但是如果我包含一个字符串作为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。

这里出了什么问题?

Answer 1

您可以将其附加到FormData，而不是body

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();

Answer 2

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

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

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