无法使用multer上传图像

Question

我正在尝试上传图片。到达后端了，但是请求正文和ciphertext = "asfgasgsaga" counter = 0 templist = [] xyz = [] for abc in ciphertext: templist.append(abc); counter += 1 if(counter == 4): print(templist) xyz.append(templist) templist = [] counter = 0 if templist: xyz.append(templist) print(xyz) 都空了。

我有提交内容：

req.image

我的终点：

const handleSubmit = async () => {
  try {
    const data = createFormData();
    console.log(data); // prints the correct request object

    const response = await axios.post(
      `http://${GATEWAY}:5000/api/uploads/single`,
      JSON.stringify(data)
    );

    alert("Upload success!");
    console.log("response.data", response.data);
  } catch (err) {
    console.log("err caught --> ", err);
  }
};

const createFormData = () => {
  const data = new FormData();

  data.append("title", title); // coming from
  data.append("body", body); // react hooks state (useState)
  data.append("image", {
    height: image.height,
    width: image.width,
    type: image.type,
    uri:
      Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
  });

  return data;
};

还有我的const express = require("express"); const multer = require("multer"); const bodyParser = require("body-parser"); express().use(bodyParser.json()); const router = express.Router(); // middleware const auth = require("../../middleware/auth"); const storage = multer.diskStorage({ destination(req, file, callback) { callback(null, "./images"); }, filename(req, file, callback) { callback(null, `${file.fieldname}_${Date.now()}_${file.originalname}`); } }); const upload = multer({ storage }); // @route POST api/uploads/single // @desc Upload single image // @access Private router.post( "/single", // upload.array("photo", 3), auth, upload.single("image"), (req, res) => { console.log("req", req.body); // {} console.log("req", req.image); // undefined return res.status(200).json({ message: "Response from backend" }); } ); module.exports = router;

server.js

由于某些原因，在第一个代码段中，如果我不对由 const express = require("express"); const connectDb = require("./config/db"); const app = express(); // connect to db connectDb(); // Define routes (some omitted for brevity) app.use("/api/uploads", require("./routes/api/uploads")); const PORT = process.env.PORT || 5000; app.listen(PORT, () => console.log(`Listening on port ${PORT}`)); 构建的data: FormData对象进行字符串化处理，那么我的后端甚至都无法到达。

我已经尝试了很多事情，而且我还没有开始认为也许我的后端设置不正确。之所以存在createFormData()是因为我无法执行express().use(bodyParser.json());（或者至少我认为），因为该应用程序对象位于主app.use(bodyParser.json());文件中。我在其他文件中包含其他API路由。

例如，我的server.js拥有以下这些东西：

server.js

我遵循了source教程，将multer与react-native结合使用。此时有点迷茫，不确定我在做什么错。

---

编辑：

我现在正在这样发出请求，

// Define routes
app.use("/api/auth", require("./routes/api/auth"));
app.use("/api/users", require("./routes/api/users"));
app.use("/api/profile", require("./routes/api/profile"));
app.use("/api/uploads", require("./routes/api/uploads"));

但是失败了

this

如果我将其字符串化，它将到达后端，但不是我需要的方式：

---

编辑：

按照建议

，我通过指定图像类型使它正常工作

Answer 1

我认为这是因为您没有将内容类型设置为multipart / form-data。尝试将其添加到您的请求选项中：

const response = await axios.post(
  `http://${GATEWAY}:5000/api/uploads/single`,
  data,
  headers: {
    `Content-Type`: `multipart/form-data`
  }
);

由于包含multipart / form-data，请勿对要发送的数据进行字符串化处理。字符串化将导致服务器仅将其读取为文本，但希望附加文件。

Answer 2

按照建议here

指定图像类型以使其正常工作

Answer 3

您正在尝试从req.image和req.body访问文件，但是正如https://www.npmjs.com/package/multer中所述，您可以从以下位置访问文件：

req.file

req.body仅保留文本字段，另一方面，如果仅上传单个文件，则可以在req.file中找到它，但是，如果您上传多个文件，则可以在req.files中找到它们。 / p>

Answer 4

我使用以下行获取图像：-

concole.log(req.files);