Question

im尝试使用react应用添加多个图像并将其发送到后端代码以将其存储在mongodb中

这是后端的代码： link

这是前端link

因此此代码仅适用于一张图片

我需要能够添加多张图片

Answer 1

服务器

由于您使用的是multer，因此将upload.single() function更改为upload.array()。

例如：

app.post("/addItem", 
  upload.array('product-image', 4), // 'product-image' is field name and 4 is the max number of files allowed
  (req, res) => {
    console.log(req.files);
    // ... rest of the logic
  }
)

签出docs for upload.array()

客户

Change current <input>允许多个文件：

<input type="file" name="product-image" onChange={this.fileChangeHandler} multiple>

现在保存用户选择的所有not only the event.target.files[0]图像：

fileChangeHandler(event) {
    let files = event.target.files
    this.setState({ selectedFiles: files })
}

现在add them in FormData并照常上传：

let formData = new FormData()
formData.append("product-image", this.state.selectedFiles)

就是这样！希望对您有所帮助。

PS：我认为不应将文件添加到状态中。您可以简单地将它们添加到类变量中。在this answer中，我解释了为什么以及如何做到这一点。

更新：

您现在需要遍历文件。您的/addItem端点的代码如下所示：

app.post("/addItem", upload.array('product-image', 4), (req, res) => {
  console.log(req.files);

  let paths = [];

  req.files.forEach(file => {
    console.log("new file location", file.path)

    let extension = file.originalname.split(".").pop()
    fs.rename(file.path, file.path + "." + extension, () => {})
    paths.push("/" + file.filename + "." + extension);
  });

  console.log("body", req.body)

  let itemToStore = {
    paths: paths,  // notice this `paths` now, it was `path`
    description: req.body.description
  }

  console.log("we are adding", itemToStore)
  itemData.push(itemToStore)
  console.log("updated itemData:", itemData)
  res.send(JSON.stringify(itemData))
})

我没有修改您的代码，只是添加了一个循环。您的'path' of undefined错误应该消失了。

如何添加多个图像并使用react和express预览它们？

1 个答案:

服务器

客户