React axios 多文件上传

Question

我正在尝试在 React 中使用 axios 上传多张图片，但我不知道出了什么问题。首先，我尝试上传单张图片，效果很好。但是对于多张图片我别无选择。

我正在这样创建 FormData：

 for (let i = 0; i < images.length; i++) {
    formData.append('productPhotos[' + i + ']', images[i]);
}

axios 请求看起来像这样

    const config = { headers: { 'Content-Type': 'multipart/form-data' } };

    axios
        .post(endPoints.createProduct, formData, config)
        .then(res => console.log(res))
        .catch(err => console.log(err));

我的后端是用 node/express 编写的，我正在使用 multer 进行上传。签名看起来像这样：

 app.post("/product", upload.array("productPhotos"), (req, res) => {

我在 PostMan 中尝试了这个后端端点并且上传工作正常，所以错误必须在前端。感谢帮助。

更新 在 formData 中传递多个文件的正确方法：

 images.forEach(img => {
    formData.append("productPhotos", img)
})

原文由 Jan Maděra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个完整的工作设置（上面答案的扩展版本）

客户端：

 // silly note but make sure you're constructing files for these (if you're recording audio or video yourself)
// if you send it something other than file it will fail silently with this set-up
let arrayOfYourFiles=[image, audio, video]
// create formData object
const formData = new FormData();
arrayOfYourFiles.forEach(file=>{
  formData.append("arrayOfFilesName", file);
});

axios({
  method: "POST",
  url: serverUrl + "/multiplefiles",
  data: formData,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})
//some error handling

服务器端（快递，节点 - mutler）

 const UPLOAD_FILES_DIR = "./uploads";
const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, UPLOAD_FILES_DIR);
  },
// in case you want to change the names of your files)
  filename(req, file = {}, cb) {
    file.mimetype = "audio/webm";
    // console.log(req)
    const {originalname} = file;
    const fileExtension = (originalname.match(/\.+[\S]+$/) || [])[0];
    cb(null, `${file.fieldname}${Date.now()}${fileExtension}`);
  }
});
const upload = multer({storage});

// post route that will be hit by your client (the name of the array has to match)
app.post("/multiplefiles", upload.array('arrayOfFilesName', 5), function (req, res) {
  console.log(req.files, 'files')
  //logs 3 files that have been sent from the client
}

原文由 Uros Randelovic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可能希望将文件作为数组发送到端点：

 images.forEach( img => {
formData.append('productPhotos[]', img);
})

原文由 Kevin Wasie 发布，翻译遵循 CC BY-SA 4.0 许可协议