Multer 从不同的输入上传多个文件 [英] Multer upload multiple files from different inputs

问题描述

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

I'm rather new to multer/node/express/mongoose/... and I'm currently trying to upload multiple files from different inputs that have the same name (I generate the inputs using reactjs).

这是我的 React 前端:

Here's my React front-end:

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>
    )
}

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

I didn't add in how I generate the fields because I felt that it wasn't relevant to the question, however, I would like to note that the user can generate however many of these file-inputs with the name-attribute "picture" as he wants.

这是我的 node.js 后端:

Here's my node.js backend:

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 并且他们收到了他们的文件数组或至少一些东西，但对我来说终端只是打印出 并退出 所以我假设我的代码中有错误.我还尝试将图片[]"设置为我的输入的名称，因为在 php 中表示一个文件数组(我知道 php 不是 node.js，但我想在问这里之前尽可能多地尝试).

I also tried using upload.any() but it didn't work and I also read that there can be security hazards with using that. I'm a little confused here, all questions/answers I've seen up until now simply use req.files and they receive an array of their files or at least something, but for me the terminal simply prints out and exit so I'm assuming there is a mistake within my code. I also tried setting "picture[]" as the name of my inputs, since, in php that indicated an array of files (I know php is not node.js, but I wanted to try out as much as possible before asking here).

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

To sum up my question: I would like to retrieve the filedata from my files from different inputs, which have the same name, using multer. It is not working, therefore I would like to ask if anyone knows what I did wrong in this case and how I can fix it.

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

( This is probably a little of topic but it seems to me that this question is too "small" to be asked as its own question. In my form I also have a few text inputs. Before using multer I stored the data gathered from each of my components (Imageinput) in its own array in the state like so:

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

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

Can send the images as a part of this array using multer? ).

推荐答案

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);
            })
        }
       })
});

这篇关于Multer 从不同的输入上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！