Question

我可以使用multer上传单个文件。但是，当涉及到多个文件时，它将不再起作用，并且没有文件被multer捕获。

我通过formData.append（）发送文件。但是它仅上传单个文件

Vue component

const formData = new FormData();
formData.append("productImg", this.imgFile);
this.$store.dispatch(POST_PRODUCT_IMAGE, formData)
    .then((response) => {
        console.log(response.data);
    })
    .catch(error => {
        console.log(error);
    })

Server file

const uploadPath = path.join(__dirname, '/../../public/uploads');
var storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, uploadPath + "/garbage/productImg");
    },
    filename: (req, file, callback) => {
        var newName = Date.now() + "_" + file.originalname;
        callback(null, newName);
    }
});

const upload = multer({
    storage: storage
});

productRouter.post('/uploadProductImage', upload.any(), async (req, res) => { // Some Code })

我也是

productRouter.post('/uploadProductImage', array('productImg[]', 6), async (req, res) => { // Some Code })

我想一次将多个文件上传到指定的文件夹。

Answer 1

最后，我找到了一个非常愚蠢的解决方案。

在Vue组件文件中，我只是在添加formData之前使用循环。这样。

Vue组件

const formData = new FormData();
// formData.append("productImg", this.imgFile); // OLD ONE
for (let index = 0; index < this.imgFile.length; index++) { //NEW ONE
  let file = this.imgFile[index];
  formData.append("productImg["+index+"]", file);
}
this.$store.dispatch(POST_PRODUCT_IMAGE, formData)
    .then((response) => {
        console.log(response.data);
    })
    .catch(error => {
        console.log(error);
    })

如何使用vue.js和multer上传多个文件？

1 个答案: