如何使用 react native axios 和 multer 上传和获取图像/formData

Question

我尝试将图像发布到 MongoDB，但得到状态 CODE 404，

• 我有 multer 和静态路径“/uploads/”，这个目录在前端有一些图像，我从服务器获取数组，但我不知道如何显示它们：

• 我尝试在平面列表中显示它们：

  //这里是它的工作。 当我替换为 {require("../../server/${item.imageurl}" 我得到错误

• 当我控制台记录需要路径时，我会使用 url->> ../../server/uploads\a1.jpg 获取对象

• 看到 / 是对面的 \ ，也许是它的问题？

---

现在我尝试上传：

1. 当我选择文件时我得到了对象（selectedImage）：

    "localUri": "file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FLior- 
    3698f362-fc81-4a77-8c97-8cd1349ce090/ImagePicker/d4c4b4ec-72e6-4e20-b6eb-4727bc84d93e.jpg",
   

还有我的 axios 帖子：

        if (selectedImage !== null) {
        let formData = new FormData();
        formData.append("image", selectedImage);
        console.log(formData);
        try {
            const response = await indexApi.post(`/uploads`, formData);
            console.log("res", response);
        } catch (err) {
            console.log("c", err);
        }
    }
};

the form data that i send look like:
    FormData {
  "_parts": Array [
    Array [
      "image",
      Object {
        "localUri": 
     "file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FLior-3698f362-fc81- 
     4a77-8c97-8cd1349ce090/ImagePicker/d4c4b4ec-72e6-4e20-b6eb-4727bc84d93e.jpg",
      },
    ],
  ],
}

我收到错误 404 或 503.....

后端部分：

1. 图像控制器：

   const Image = require("../models/image");
   const _ = require("lodash");
   
    exports.getImages = (req, res) => {
   Image.find()
       .select("_id image desc")
       .then(images => {
           res.json({ images });
       })
       .catch(err => console.log("get images errors", err));
     };
   
    //INSERT NEW IMAGE//
      exports.uploadImage = (req, res) => {
       const image = new Image({
       image: req.file.path,
       desc: req.body.desc,
   });
   console.log(image);
   console.log(image);
   
   console.log("ss", image);
   image.save(err => {
       if (err) {
           return res.status(400).json({ error: "העלאת תמונה נכשלה" });
       }
       res.json({ message: "העלאת תמונה עברה בהצלחה" });
   });
   

   };

2. 图片路线：

   const express = require("express");
    const { getImages, uploadImage } = require("../controllers/image");
   const multer = require("multer");
   
   //configure the images
    const storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, "./uploads");
     },
      filename: function (req, file, cb) {
       console.log("f", file);
       cb(null, file.originalname);
     },
     });
   
    const upload = multer({
   storage: storage,
   limits: {
       fileSize: 1024 * 1024 * 55,
   },
   });
   
   const router = express.Router();
   router.get("/images", getImages);
   router.post("/images/new", upload.single("image"), uploadImage);
   module.exports = router;
   

所以也许我的问题可能会偏离路线......因为我不明白我有一条用于图像的路线（上传），以及另一条带有 get 和 post 方法（/images）的路线发布 (/images/new)

编辑。第一部分的错误图片

Answer 1

尝试先解决这个问题：-

一个。您的 require 可能无法从 item.imageUrl 读取传入的 value，因为您在 双引号 ("") 中调用了它：-

• 尝试使用 反引号 (``)：-

<Image source={require(`../../server/${item.imageUrl}`)} />

或

您可以尝试以下两种方法之一：-

1. 保存图像 path 在db

• 在imageUpload 方法/函数中：-

//INSERT NEW IMAGE//
exports.uploadImage = (req, res) => {
  const image = new Image({
    // don't do this
    // image: req.file.path,
    // instead try do this
    image: '/uploads/' + req.file.originalname, 
    desc: req.body.desc,
  });
  console.log(image);
  console.log(image);

  console.log("ss", image);
  image.save(err => {
    if (err) {
      return res.status(400).json({ error: "העלאת תמונה נכשלה" });
    }
    res.json({ message: "העלאת תמונה עברה בהצלחה" });
  });

1. 保存图像 originalname 仅在db

• 在imageUpload 方法/函数中：-

//INSERT NEW IMAGE//
exports.uploadImage = (req, res) => {
  const image = new Image({
    // don't do this
    // image: req.file.path,
    // instead try do this
    image: req.file.originalname, 
    desc: req.body.desc,
  });
  console.log(image);
  console.log(image);

  console.log("ss", image);
  image.save(err => {
    if (err) {
      return res.status(400).json({ error: "העלאת תמונה נכשלה" });
    }
    res.json({ message: "העלאת תמונה עברה בהצלחה" });
  });

• 在“视图”或前端：-

<Image source={require(`../../server/uploads/${item.imageUrl}`)} />