如何在nodejs中接收上传的文件

Question

我有一个redux-from提交，控制台日志是这样的

{
  id: "x", 
  parentId: "b", 
  editing: true, 
  logo: FileList, 
}

Logo FileList 包含我上传的文件名和文件，我认为

0: File(19355) {name: "11964821.jpeg", lastModified: ......

使用fetch发送到nodejs，图片包含我的文件和以上数据

function Update(image) {

    const requestOptions = {
        method: 'POST',
        headers: { ...authHeader(), 'Content-Type': 'application/x-www-form-urlencoded' },
        body: JSON.stringify(image)
    };
    return fetch(`${apiUrl}/API`, requestOptions).then(handleResponse)
    .then( data => {  return data; });
}

但是这个数据没有接收到nodejs，因为尝试了re.file等。它显示未定义

app.post('/image', upload.single('logo'), function (req, res, next) {

})

---

包括 formdata

  const onSubmit = (image, dispatch)=>{

    var formData = new FormData(); 
    formData.append('logo',image.logo[0]);

    var imageNew = {...image,formData};

    dispatch(imageActions.companyProfileLogoUpdate(imageNew)) ;  
  }

现在日志是

formData: FormData {}
id: "5c66478b0814720a4365fe72"
logo: FileList {0: File(19355), length: 1}
parentId: "5c66478b0814720a4365fe71"

Answer 1

let formData = new FormData();
formData.append('logo' , {{your image file}}

// upload file as 
let result = await sendServerRequestForForm(url,formData);


function sendServerRequestForForm(url,data) {
var promise = new Promise(function(resolve) {
    resolve($.ajax({
        url,
        method : 'POST',
        data,
        processData: false,
        contentType: false,
        success: function(data) {
            return data
        },
        error: function (err) {
            try{
                let responseStatus = err.responseJSON
                // watch your response
            }catch (e) {
                console.log('Field to get response');
            }
        }
    }));
});
return promise

}

Answer 2

对于 fetch API 你可以试试这个

let formData = new FormData();
formData.append('logo', fileList[0]);

fetch(url, {
method: 'post',
body: data,
})
.then(…);

Answer 3

移动 formData 以获取文件并删除标题内容类型，试试这个

function Update(image) {

var formData = new FormData(); 
formData.append('logo',image.logo[0]);  

    const requestOptions = {
        method: 'POST',
        headers: { ...authHeader() },
        body: formData
    };
    return fetch(`${apiUrl}/API`, requestOptions).then(handleResponse)
    .then( data => {  return data; });
}

Answer 4

首先是使用fetch api 发布content-type header 应该匹配typeof body。因为你的身体是 json stringified 你的 contentType 标题应该是 'application/json' 。 more about this.

第二。因为你想上传一张file 的图片，你应该使用FormData 而不需要设置 contentType: like below:

let formData = new FormData();
formData.append('logo', image.logo[0]);

const requestOptions = {
  method: 'POST',
  body: formData
};

fetch(`${apiUrl}/API`, requestOptions)
.then(handleResponse)...