javascript - Multer 从不同的输入上传多个文件

Question

我对 multer/node/express/mongoose/... 相当陌生，我目前正在尝试从具有相同名称的不同输入上传多个文件(我使用reactjs 生成输入)。

这是我的 React 前端:

onSubmit = (e) => {

    e.preventDefault();

    const {imges} = this.state;
    let formData = new FormData();

    formData.append('imges', imges);

    axios.post('newuser',
        formData)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

handleFileChange(inputid, file) {
    const data = [...this.state.data];
    this.setState({
        imges: this.state.imges.concat(file)
    }, () => console.log(this.state.imges));
}

render() {
    return(
        <form onSubmit={this.onSubmit} encType="multipart/form-data">
            <Imageinput onhandleChange={this.handleFileChange}/>
        </form>
    )
}

我没有添加如何生成字段，因为我觉得它与问题无关，但是，我想指出的是，用户可以生成许多带有名称的文件输入 -根据他的需要添加“图片”属性。

这是我的 Node.js 后端:

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "./uploads/");
    },

    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
        cb(null, newFilename);
    },
})

const upload = multer({ storage: storage });
router.post("/", upload.array("picture"), (req, res) => {
    console.log(req.files + " and exit");
    res.end();
});

module.exports = router;

我还尝试使用 upload.any() 但它不起作用，而且我还了解到使用它可能存在安全隐患。我在这里有点困惑，到目前为止我看到的所有问题/答案都只是使用 req.files 并且他们收到了一组文件或至少是一些东西，但对我来说终端只是打印出并退出，所以我假设我的代码中有错误。我还尝试将“picture[]”设置为我的输入名称，因为在 php 中表示文件数组(我知道 php 不是 node.js，但我想在此处询问之前尽可能多地尝试一下) .

总结我的问题:我想使用 multer 从具有相同名称的不同输入中检索文件数据。它不起作用，因此我想问是否有人知道我在这种情况下做错了什么以及如何解决它。

(编辑:这可能是一个小话题，但在我看来，这个问题太“小”，不能作为自己的问题提出。在我的表单中，我也有一些文本输入。在使用 multer 之前，我存储了从我的每个组件(Imageinput)收集的数据在其自己的数组中，状态如下:

 data : [{data1: value, imgsrc: value}, {data1: value, imgsrc: value}, ... ]

可以使用 multer 将图像作为该数组的一部分发送吗？)。

Answer 1

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './client/uploads/')
    },
      filename: function (req, file, cb) {
        cb(null, Date.now() + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1]) //Appending extension
    }
});

const Upload = multer({storage: storage}).any();

router.post('/', function (req, res) {
    Upload(req, res, function (err, filedata) {
        if (err) {
            res.json({error_code: 1, err_desc: err});

        } else {
            functionName(req.files, function (result) {
                            res.json(result);
            })
        }
       })
});