如何解析nodejs中FormData()提交的数据?

Question

我通过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"}

Answer 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);
}
}
}

Answer 2

使用fetch,FormData为body时，不设置Content-Type标头，将自动设置为multipart/form-data。然后您可以使用multer在服务器上解析它，正如Marc Stroebel所建议的。