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

Question

我有一个更改用户个人资料头像页面..我正在使用 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 从 'data' 对象内部读取文件？

后端部分：

//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!'))
  }
}

Answer 1

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

"multipart/form-data" 用于处理 blob，如果没有一些妥协（例如编码 base64 或其他编码，这会导致更大的大小），普通 HTTP 无法真正处理 blob。 "multipart/form-data" 基本上是流式上传，因此会有块加载到您的服务器。 Multer就是用来处理这个的。

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

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

How to receive uploaded file within object nodejs/multer

xmlhttprequest

node.js

multer