使用 NodeJs 和 Multer 將文件上傳到服務器

Question

我正在嘗試使用 NodeJs 和 Multer 將文件上傳到服務器。 但我不成功。 當我從前端發布文件時，我得到如下條件語句：

You must select at least 1 file.

根據下面的腳本， console.log(req.files)返回一個空數組[] 。

在userController.js下面

 const mysql = require('mysql'); const jwt = require('jsonwebtoken'); const bcrypt = require('bcryptjs'); const { promisify } = require('util'); const upload = require("../middleware/upload"); exports.update = async (req, res) => { message = ''; if (req.method == 'POST') { var post = req.body; var first_name = post.first_name; var last_name = post.last_name; if (req.files) { // console.log(req.files) try { await upload(req, res); console.log(req.files); if (req.files.length <= 0) { return res.send(`You must select at least 1 file.`); } return res.send(`Files has been uploaded.`); } catch (error) { console.log(error); if (error.code === "LIMIT_UNEXPECTED_FILE") { return res.send("Too many files to upload."); } return res.send(`Error when trying upload many files: ${error}`); }

這是我的中間件upload.js

 const util = require("util"); const path = require("path"); const multer = require("multer"); var storage = multer.diskStorage({ destination: (req, file, callback) => { callback(null, path.join(`${__dirname}/../../upload`)); }, filename: (req, file, callback) => { const match = ["image/png", "image/jpeg", "application/pdf"]; if (match.indexOf(file.mimetype) === -1) { var message = `<strong>${file.originalname}</strong> is invalid. Only accept png/jpeg/pdf.`; return callback(message, null); } var filename = `${Date.now()}-bezkoder-${file.originalname}`; callback(null, filename); } }); var uploadFiles = multer({ storage: storage }).array("multi-files", 10); var uploadFilesMiddleware = util.promisify(uploadFiles); module.exports = uploadFilesMiddleware;

這里我的user.js用於路由：

 const express = require('express'); const router = express.Router(); const userController = require('../controllers/userController'); router.post('/editcrew/:id',userController.update);

我的前端：

 <form class="row g-1 needs-validation" method="POST" action="/editcrew/{{this.id}}" encType="multipart/form-data" novalidate> </form> <input type="file" name="covid_19D" id="file_box" /> <div class="col-md-1 mt-5 d-grid"> <button class="btn btn-primary" type="submit">Submit</button> </div>

任何關於正確道路的建議、建議和方向都非常感謝！

Answer 1

您的文件輸入在表單之外，因此它不是提交表單時將發送的內容的一部分。

將其移動到表單中：

<form class="row g-1 needs-validation" method="POST" action="/editcrew/{{this.id}}" encType="multipart/form-data" novalidate>
  <input type="file" name="covid_19D" id="file_box" />
</form>

Answer 2

在 userController.js 中，嘗試使用then()而不是await調用上傳中間件：

const upload = require("../middleware/upload");


exports.update = async(req, res) => {

    if (req.method == 'POST') {

        var post = req.body;
        var first_name = post.first_name;
        var last_name = post.last_name;

        upload(req, res).then(() => {

            if (req.files) {

                if (req.files.length <= 0) {
                    return res.send(`You must select at least 1 file.`);
                }

                return res.send(`Files has been uploaded.`);
            }

        }).catch(error => {

            if (error.code === "LIMIT_UNEXPECTED_FILE") {
                return res.send("Too many files to upload.");
            }
            return res.send(`Error when trying upload many files: ${error}`);
        });
    }
}