上传多个文件 (Multer, New FormData ())

Question

我使用 multer 将图像上传到网站。我使用 multer 将多个文件加载到我使用 new FormData() 的表单：

多路复用器配置

  //Save image in browswe memory
  const multerStorage = multer.memoryStorage();
 
 //Check if uploaded fille is an image

 const multerFilter = (req,file,cb)=>{
   if(file.mimetype.startsWith('image')){
     cb(null,true)
   } else{
      cb(new AppError('Not an image! Please upload only images', 400),false);
  }
}

//Allow upload
const upload = multer({
    storage:multerStorage,
    fileFilter:multerFilter
});
exports.uploadPostImages = upload.fields([
  {name:'images',maxCount:4}
]);

exports.resizePostImages = catchAsync(async(req,res,next) =>{

if(!req.files) return next();


req.body.images = [];
await Promise.all(req.files.images.map(async(file, i) => {
        const filename = `post-image--${req.user.id}--${Date.now()}-${i+1}--specialSoft.jpeg`;

        await sharp(file.buffer)
        .resize(1200,800)
        .toFormat('jpeg')
        .jpeg({quality:95})
        .toFile(`public/post-photo/${filename}`);

        req.body.images.push(filename);
      })
    );

    next();
  });

数据是从我使用 new FormDate() 的表单输入到数据库中的，但问题是当我尝试加载多个图像时，只会加载一个。

//Create Post 
let createPost = document.querySelector('.createNew--post--creativePoint');
if(createPost){
createPost.addEventListener('submit',(crPos)=>{
    crPos.preventDefault();

    const postData = new FormData();
        postData.append('title',document.getElementById('creative---Point19981022-create--newPostTitle').value);
        postData.append('description',document.getElementById('creative---Point19981022--newPostDescription').value);
        postData.append('datePost',document.getElementById('creative---Point19981022--dataNow').value);
       
        postData.append('images',document.getElementById('creative---Point19981022--newPostPhoto').files[0]);
        

       createPostFnc(postData); 
});
}

我尝试使用 for 循环

来调整代码

  let filesImg = document.getElementById('creative---Point19981022--newPostPhoto').files;
  const postData = new FormData();
       
        for (let p = 0; p < filesImg.length; p++) {
            postData.append(filesImg[p]);
          }

但我有一个错误。

main.js:216 Uncaught TypeError: Failed to execute 'append' on 'FormData': 2 arguments required, but only 1 present.
at HTMLFormElement.eval

如何解决这个问题并加载多个文件。

Answer 1

如错误所示，调用append 函数时需要两个参数，如果要发送图像名称，则需要三个参数，如文档中所示。

应该是这样的

for (let p = 0; p < filesImg.length; p++) {
    postData.append('images', filesImg[p]);
}