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

Posted 2023-02-27

【中文标题】如何在nodejs中接收上传的文件

【英文标题】：How to recive uploded file in nodejs

【发布时间】：2019-07-15 01:37:13

【问题描述】：

我有一个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"

【问题讨论】：

什么是upload.single('logo')？

nodejs的multer文件上传包

你是用multer保存图片吗

FileList 是单张图片还是多张图片

是的...使用 multer 保存图像，支持的部分可以，因为它与邮递员一起工作正常

【参考方案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

【讨论】：

他具体使用fetch api。 fetch 和 jquery ajax 差别很大

:( 是 fetch api

ok @david 你可以试试下面的答案我只是忘了你正在使用 fetch :)

你也可以用ajax解决这个问题？

会尝试，但更喜欢这个解决方案:(

【参考方案2】：

对于 fetch API 你可以试试这个

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

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

【讨论】：

你确定 Content-Type' 是 'application/x-www-form-urlencoded 吗？

【参考方案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; );

【讨论】：

谢谢，fileList[0] 到 image.logo[0]，工作正常 :)

【参考方案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)...

【讨论】：

我在 image.logo[0] 中的文件，可以加入 var imageNew = ...image,formData;像这样？

我不这么认为。 formData 不是简单的对象 its instance of formData

我不这么认为。 formData不是简单的对象its instance of formData 。要添加数据，需要调用formData.append('logo', fileList[0])。

Uncaught ReferenceError: fileList is not defined

@david dude，我写了fileList 只是为了表示您正在使用的任何变量列表。最重要的是，这些随机的家伙盲目地复制了我的答案并粘贴了。其中之一也被接受：/