无法上传图像以从反应中使用 Multer 表达 api

Question

我想从我的反应应用程序上传图像到我的快速 API。 我在 vainla js 中做了这样的事情，它使用相同的端点工作，但在 react 项目中不起作用。 我创建了一个像这样的反应组件：

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;

他们我写代码。 使用multer的api

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 .what I missing? 以及如何解决此问题？

Answer 1

您缺少标题中的内容类型。

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