Загрузка нескольких изображений из React в Multer - PullRequest
Новая
       24

Загрузка нескольких изображений из React в Multer

0 голосов
/ 25 декабря 2018

Я использую response, multer и node.js

Я загружаю одно изображение одним методом без проблем, но я не могу загрузить несколько файлов и не получаю никаких ошибок.

Я протестировал внутренний код node.js с Postman, и он работает (загружает несколько изображений), но когда я пытаюсь среагировать, он не работает.то, что я получаю с req.files - это пустой массив.

Пожалуйста, смотрите мой код ниже:

код node.js: 

const multer = require("multer");

const storage = multer.diskStorage({

  destination: (req, file, cb) => {

    //uploaded files destination
    cb(null, "./client/public/images");
  },
  filename: (req, file, cb) => {

    const newFilename = `${new Date().getDate()}-${new Date().getMonth() +
      1}-${new Date().getFullYear()}-${file.originalname}`;
    cb(null, newFilename);
  }
});

const upload = multer({ storage }).array('files');

const Product = require("../../modules/products");

router.post("/addnew", upload, (req, res) => {

     let products = JSON.parse( // Saving products database
       fs.readFileSync(path.join(__dirname, "../../db") + "/products.json")
     );

     const product = new Product(req.body, req.files, uuidv4());   // Creating new Product

     products.unshift(product);    // Adding new product to products array
     products = JSON.stringify(products);     // Updating products database

     fs.writeFileSync(
       path.join(__dirname, "../../db") + "/products.json",
       products
     );

     return res.json(product);
});

Код реакции 

import React, { Component } from "react";
import axios from "axios";

export default class NewProduct extends Component {
  state = {
    files: "",
  };

  onChangeHandler = e => {
    this.setState({ files: e.target.files });
  };

  onSubmitHandler = e => {
    e.preventDefault();

    let formData = new FormData();

    formData.append("files", this.state);

    axios
      .post("/api/products/addnew", formData)
      .then(res => {
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    return (

      <form className="form-product" encType="multipart/form-data" onSubmit={this.onSubmitHandler} >

        <div className="form-row">
          <label htmlFor="customFile">Product Images</label>

          <div className="custom-file col-md-12">
            <input type="file" multiple className="custom-file-input" id="customFile" name="files" onChange={this.onChangeHandler} />
            <label className="custom-file-label" htmlFor="customFile">
              Choose Main Photo
          </label>
          </div>
        </div>

        <div className="col-md-12 text-center">
          <button type="submit" className="btn btn-primary new-product-button">
            Add
        </button>
        </div>

      </form>

    )
  }
}
...