我如何使用 multer 進行反應？

Question

我正在使用 Node.js 和 React 構建一個 web 應用程序，並且我正在嘗試在我的后端存儲一些文件。 出於某種原因，盡管我配置了所有 multer 策略，但我無法訪問我的 req.path。

const multer = require('multer')
const config = require('config')
const auth = require('../../middleware/auth')
const {check , validationResult } = require('express-validator');

const storage = multer.diskStorage({
    destination: function(req, file , cb){
        cb(null,'uploads/')
    },
    filename: function(req, file, cb){
        cb(null, req.user.id)
    }
});

const fileFilter = (req, file , cb) =>{
    if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png')
    cb(null,false);
    else
    cb(null,true);
}

我的路線：

router.post('/' , [auth,upload.single('image'),
    [
    check('status','Status is required').not().isEmpty(),
    check('skills','Skills is required').not().isEmpty(),
    check('gender','Gender is required').not().isEmpty()
    ]],
    async (req,res) => {// cant access to req.file.....}

和我的反應形式：

 <div className="form-group">
                   <input type="text" placeholder="Choose profile image" name="profileImage" value={image}/>
                   <input type="file" placeholder="Upload"  enctype="multipart/form-data" name="image" onChange={(e) => onChange(e)}/>
                   <small className="form-text">The image must not be bigger then 5MB and only JPG\JPEG\PNG types</small>
 </div>

請問，我做錯了什么？

Answer 1

我在我的后端應用程序中使用了 multer，這就是我配置它的方式，它可以正常工作並將所需的文件存儲在服務器文件目錄中。

一、安裝multer

 npm i multer --save

二、在 required.js 文件頂部初始化

const multer = require("multer");

現在，配置存儲（存儲位置和文件名）

  const storage = multer.diskStorage({
      destination: "./public/uploads/postimages/",
      filename: function (req, file, cb) {
        cb(
          null,
          file.fieldname + "-" + Date.now() + path.extname(file.originalname)
        );
      },
    });

init multer function，（配置自己的文件大小）

如果要一次上傳多個文件，請使用數組，10是文件數，您可以根據需要進行修改。

 const upload = multer({
      storage: storage,
      limits: { fileSize: 10000000000 },
    }).array("image", 10);

// 使用.single("image"); 如果要上傳單個文件。 // 圖像是從前端與文件一起發送的名稱/密鑰。

如果你使用數組，你可以創建一個 api 來存儲文件，它看起來像這樣。

  try {
    let imagePath = "abc";
    let postId = req.params.postId;
    let imagesLinks = [];

    await upload(req, res, (err) => {
      if (err) {
        console.log(err);
      } else {
        if (req.files == undefined) {
          console.log("File not found.");
        } else {
          //image uploaded successfully

          req.files.map(function (file) {
            imagePath = "uploads/postimages/" + file.filename;
            imagesLinks.push(tmp);
          });
        }
      }
      res.status(201).send(imagesLinks);
    });
  }

對於單個文件，看起來就這么簡單

 try {
    let imagePath = "abc";

    upload(req, res, (err) => {
      if (err) {
        res.status(300).send(err);
        console.log(err);
      } else {
        if (req.file == undefined) {
          res.status(301).send("image upload failed.");
        } else {
          //image uploaded successfully
          imagePath = "uploads/" + req.file.filename;
          storeImageLink(res, imagePath);
        }
      }
    });
  }

Answer 2

看看這些例子。 他們會幫助你：

在 Node.js 和 Express 中使用 Multer 上傳文件

多用途存儲：

// SET STORAGE
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
 
var upload = multer({ storage: storage })

處理文件上傳：

app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
  const file = req.file
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
    res.send(file)
  
})

Reactjs nodejs 上傳圖片 — 如何使用 reactjs 和 nodejs (multer) 上傳圖片

Node.js：

const path = require("path");
const multer = require("multer");

const storage = multer.diskStorage({
   destination: "./public/uploads/",
   filename: function(req, file, cb){
      cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname));
   }
});

const upload = multer({
   storage: storage,
   limits:{fileSize: 1000000},
}).single("myImage");
const router = express.Router();
router.post("/upload", {
   upload(req, res, (err) => {
      console.log("Request ---", req.body);
      console.log("Request file ---", req.file);//Here you get file.
      /*Now do where ever you want to do*/
      if(!err)
         return res.send(200).end();
   });
};);