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

我没有添加如何生成字段，因为我觉得它与问题无关，但是，我想请注意，用户可以生成许多这些文件输入使用name-attribute＆＃34; picture＆＃34;他想要的。

这是我的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并且他们收到了他们的文件或至少某些内容，但对我来说终端只是打印出来and exit所以我假设我的代码中存在错误。我也试过设置＆＃34; picture []＆＃34;作为我的输入的名称，因为，在PHP中指示了一个文件数组（我知道php不是node.js，但我想在尝试之前尽可能多地尝试）。

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

（编辑：这可能是一个主题，但在我看来，这个问题太小了＃34;小问题被问到自己的问题。在我的表格中我也有一些文字输入。在使用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);
            })
        }
       })
});

Multer上传来自不同输入的多个文件

1 个答案: