如何在对象 nodejs/multer 中接收上传的文件答案

【问题标题】：How to receive uploaded file within object nodejs/multer如何在对象 nodejs/multer 中接收上传的文件
【发布时间】：2021-06-12 19:31:21
【问题描述】：

我有一个更改用户个人资料头像页面..我使用 XHR 上传图片..然后使用 multer（后端）接收它。我面临的问题是接收到的数据是空的，因为我在里面发送图片和对象

var loadFile = function(event) {
  //avatar file
  let file = event.target.files[0];

  let formData = new FormData();

  formData.append('userAvatarFile', file);

  customAjax({
    method: 'post',
    route: '/profileEdit/userAvatar',
    type: "multipart/form-data",
    data: {
      target: formData //the avatar file is inside this "data" object
  })
 };

问题： 如您所见，我将“formData”放入对象中，但是当我这样做时，multer 将找不到文件，并且必须像这样发送 formData .. 如何我可以让 multer 从“数据”对象中读取文件吗？

后端部分：

//SET DESTINATION AND FILE NAME FOR THE UPLOADED IMAGES
const storage = multer.diskStorage({destination: __dirname + 
'/../views/resources/images/avatar',
filename: function(req, file, cb){
  cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}});

//init upload for multer
const upload = multer({storage: storage,
  limits: {
  fileSize: 1000000
},
fileFilter: function(req, file, cb){
  checkFileType(file, cb);
}
}).single('userAvatarFile');

//SECURITY PART OF FILE UPLOADING
//check the uploaded files
function checkFileType(file, cb){
//Allowed ext
  const filetypes = /jpeg|jpg|png|gif/;
//check ext
  const extname= filetypes.test(path.extname(file.originalname).toLowerCase());
//check mime
  const mimetype = filetypes.test(file.mimetype);

  if(mimetype && extname){
    return cb(null, true);
  }else{
    return cb(new Error('Images Only!'))
  }
}

【问题讨论】：

我怀疑问题可能出在checkFileType，您能否尝试控制台记录一下file 是什么或req.body 是否发送了数据？
没有检查文件类型是否正常工作..因为我在其他位置文件中使用它（张贴图片）。
如果你能把它上传到github repo，我会帮忙看看。没有所有其他部分，这有点难以做到。
ok .. 这是项目链接github.com/salsa-project/crispy-talk 这是heroku上的实时预览crispy-talks.herokuapp.com/wall/new
里面有很多代码 .. go views>resources>js>app.js 用于 xhr 部分

标签： node.js xmlhttprequest multer

【解决方案1】：

在解决 OP 问题时，似乎所有 xhr 都已合并到一个函数中以简化所有请求。但是，数据在发送前经过JSON.stringify的转换，这不是"multipart/form-data"应该做的。

"multipart/form-data" 用于处理 blob，普通 HTTP 无法在不妥协的情况下真正处理（如编码 base64 或其他编码，这会导致更大的大小）。 "multipart/form-data" 基本上是一个流上传，所以会有块加载到你的服务器。 Multer 用于处理此问题。

您可以在此处阅读有关"multipart/form-data" 的更多信息 https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

【讨论】：

很好的答案和解释..谢谢:)