Как я могу добавить несколько изображений и просмотреть их с помощью реакции и экспресс?

Question

я пытаюсь добавить несколько изображений с помощью приложения реакции и отправить их в код бэкэнда для сохранения их в mongodb

вот код для бэкенда: ссылка

и это интерфейс ссылка

, поэтому этот код работает только для одного изображения

Мне нужно иметь возможность добавить несколько изображений

Answer 1

Сервер

Поскольку вы используете multer, измените функцию upload.single() на 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
  }
)

Проверить документы для upload.array()

Клиент

Изменить текущий <input> для разрешения нескольких файлов:

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

Теперь сохраните все выбранные пользователем изображения , а не только event.target.files[0]:

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

Сейчас добавьте их в FormData и загрузите как обычно:

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

Вот и все!Надеюсь, это поможет.

PS: Я не думаю, что файлы должны быть добавлены в состояние.Вы можете просто добавить их в переменную класса.В этом ответе я объяснил почему и как это сделать.

---

Обновление:

Вам нужно зациклить файлы сейчас.Код вашей /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 должна исчезнуть.