не могу загрузить изображение в express API с Multer от реакции - PullRequest
Новая
       8

не могу загрузить изображение в express API с Multer от реакции

0 голосов
/ 14 февраля 2020

Я хочу загрузить изображение из моего приложения реакции в мой express API. я сделал что-то вроде этого в vainla js, и это работало с той же конечной точкой, но в реагировать проект не работает. Я создал компонент реагирования следующим образом: 

import React, { useState } from "react";
import BackupIcon from "@material-ui/icons/Backup";
import url from "../url";
import Preview from "./Preview";

const AdaugaImg = props => {
  const [file, setFile] = useState(null);
  const [ales, setAles] = useState(false);
  const [imgUrl, setImgUrl] = useState("");

  const modificare = e => {
    //console.log(e.target.value);
    setFile(e.target.files[0]);
    setAles(true);

    const urlImg = URL.createObjectURL(e.target.files[0]);
    //console.log(urlImg);
    //reader.onloadend = e => setImgUrl(reader.result);
    setImgUrl(urlImg);
  };

  const upload = async e => {
    e.preventDefault();
    setAles(false);
    console.log("incarcare");
    console.log(file);
    try {
      const data = new FormData();
      data.append("img", file);
      const res = await fetch(`${url}/add`, {
        method: "POST",
        data: data
      });
      console.log(await res.json());
    } catch (error) {
      console.log(error);
    }
  };
  const closePreview = () => setAles(false);
  const preview = ales ? (
    <Preview imgUrl={imgUrl} closePreview={closePreview} />
  ) : null;
  return (
    <div className="upload">
      {preview}
      <form method="POST" onSubmit={upload}>
        <input
          type="file"
          name="img"
          id="poza"
          style={{ width: 0.1, height: 0.1 }}
          onChange={modificare}
        />
        {!ales ? (
          <label for="poza" className="upload-label">
            <p>Selecteaza o poza</p>
          </label>
        ) : null}
        <button className="upload-btn" type="submit">
          <BackupIcon />
          <p>Incarca poza</p>
        </button>
      </form>
    </div>
  );
};
export default AdaugaImg;

. Я написал код. для API, использующего multer 

const router = require("express").Router();
const multer = require("multer");
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "img-biserici/");
  },
  filename: function(req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_.jpg");
  }
});

const upload = multer({
  storage: storage
});

router.post("/add", upload.array("img", 1), (req, res) => {
  console.log(req.files[0]);
  res.json({ ok: true });
});

, когда я загружаю изображение в консоль, он показывает мне эту ошибку: TypeError: Cannot read property '0' of undefined .Что я пропустил? и как это исправить?

1 Ответ

1 голос
/ 14 февраля 2020

Вам не хватает типа содержимого в заголовках. 

  const res = await fetch(`${url}/add`, {
    method: "POST",
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
...