nodejs中如何解析FormData()提交的数据？答案

【问题标题】：How to parse data submitted by FormData() in nodejs?nodejs中如何解析FormData()提交的数据？
【发布时间】：2022-11-23 22:12:57
【问题描述】：

我正在通过 FormData() 将 base64 图像提交到服务器端。得到类似的东西

{"------WebKitFormBoundaryjJtrF2zdTOFuHmYM\\r\\nContent-Disposition: form-data; name":"\\"image\\"\\r\\n\\r\\ndata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABiCAYAAADnRp6aAAAAAXNSR0IArs4c6QAAIABJREFUeF7tnQd0FFUXx/9vdtNDSC8kJCEJISEJgd7pz4GGfiqoqm5C1aNSPaqq9hYVVFW1VOXnqaCqoQ1VUKmgqmrXUUFVVUupoKq9pczuoIJKBVVVO5UKqqpaSgVV7S1ldof/A9VZZwflQmSiAAAAAElFTkSuQmCC\\r\\n------WebKitFormBoundaryjJtrF2zdTOFuHmYM--\\r\\n"}

如何解析它以单独获取图像数据。我使用 expressjs 作为后端。我不是通过 html 表单标签提交普通图像。编码：

           var src = document.getElementById('hdrimg').src;
       var formData = new FormData()
       formData.append("image",src);
       let response = await fetch('http://localhost:3000/hdrimg', {
        method: 'POST',
        headers: {
               "Content-Type": "application/x-www-form-urlencoded",
            },
        body:  formData
          });

使用 formdata 构造函数手动提交图像源。我尝试使用 multer ， express-file-upload 就像我们对普通文件所做的那样。有没有其他方法可以在后端检索这样的数据。

    {"------WebKitFormBoundaryjJtrF2zdTOFuHmYM\\r\\nContent-Disposition: form-data; name":"\\"image\\"\\r\\n\\r\\ndata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABiCAYAAADnRp6aAAAAAXNSR0IArs4c6QAAIABJREFUeF7tnQd0FFUXx/9vdtNDSC8kJCEJISEJgd7pz4GGfiqoqm5C1aNSPaqq9hYVVFW1VOXnqaCqoQ1VUKmgqmrXUUFVVUupoKq9pczuoIJKBVVVO5UKqqpaSgVV7S1ldof/A9VZZwflQmSiAAAAAElFTkSuQmCC\\r\\n------WebKitFormBoundaryjJtrF2zdTOFuHmYM--\\r\\n"}

【问题讨论】：

尝试 multer 中间件：expressjs.com/en/resources/middleware/multer.html

标签： node.js express form-data

【解决方案1】：

你可以这样尝试：

function upload_share_file(){
    file=document.getElementById("share_file").files[0]
    console.log(file["name"])
    startUpload(file,"/srdata?type=file_upload&filename="+file["name"],
        function(response){
            uResponseAlert(JSON.parse(response))
            // console.log(response)
            file_table()
        }
    )
}

function startUpload(file,uploadUrl,callback)
{    
  
    var request = new XMLHttpRequest();     
    request.upload.addEventListener("progress", window.evt_upload_progress, false);
    request.addEventListener("load", window.evt_upload_complete, false);
    request.addEventListener("error", window.evt_upload_failed, false);
    request.addEventListener("abort", window.evt_upload_cancel, false);         
    request.open("POST", uploadUrl);
    request.send(file); 

    request.onreadystatechange = function() {
      if (request.readyState === 4) {  //run  it when get response
        console.log(request.response)
        callback(request.response);
      }
    }
}

【讨论】：