Multer 不创建文件

Question

我在使用 multer 创建文件时遇到问题。

文件架构：

My app folder
   Back
      config
        -config.json
      images
      middleware
        -auth.js
        -multer-config.js
      migrations
        -create-user.js
        -create-message.js
      models
        -index.js
        -message.js
        -user.js
      node_modules
      routes
        -posts.js
        -users.js
      -.env
      -app.js
      -server.js
      -package.json
      -package-lock.json

   Front
      --some files

前面：

async handleSubmit() {

    var formData = new FormData();
    formData.append('image', this.file[0]);

    await fetch("http://localhost:3000/api/sendTest",{
    method: 'POST',
    body: formData,
    headers:{"content-type": "multipart/form-data; boundary=image", "authorization": this.$store.state.jwt}
    });

}

后面（/back/routes/posts.js）：

const express = require('express');
const router = express.Router();
var models = require('../models');
const auth = require('../middleware/auth');
const multer = require('../middleware/multer-config');

router.post('/sendTest', auth, multer, async (req, res, next) => {
    try {

        console.log(req.file); // return undefined

        res.status(201).json({
            message: 'Message publié'
        });

    } catch (err) {
        res.status(400).json({ message: err.original.sqlMessage });
    }

});

后面（/back/app.js）：multer-config：console.log（this.file[0

const express = require('express');
const app = express();
const helmet = require('helmet'); 
const path = require('path');
app.use(helmet()); 

// Routage
const postsRoutes = require("./routes/posts");
const usersRoutes = require("./routes/users");

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
    next();
});

app.use(express.json());

app.use('/api', express.static(path.join(__dirname, 'images')));
app.use('/api', postsRoutes);
app.use('/api', usersRoutes);

module.exports = app;

]

const multer = require('multer');

const MIME_TYPES = {
  'image/jpg': 'jpg',
  'image/jpeg': 'jpg',
  'image/png': 'png',
  'image/gif': 'gif'
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, 'images');
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(' ').join('_');
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + '.' + extension);
  }
});

module.exports = multer({storage: storage}).single('images');

）从前面返回：

File { name: "Screenshot_2.jpg", lastModified: 1635463756273, webkitRelativePath: "", size: 117741, type: "image/jpeg" }

console.log（ formData) 从前面返回：

FormData {  }

但是，这是正常的，我们必须使用键：

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

returns

image 
File { name: "Screenshot_2.jpg", lastModified: 1635463756273, webkitRelativePath: "", size: 117741, type: "image/jpeg" }

我们可以在中看到请求Network

因此，我认为 Front 发送的文件格式很好。

据我了解，multer 必须在“/back/images”中创建文件，然后我们应该能够在路由“/sendTest”中使用 req.file，但它返回未定义。

我正在使用sequelize 连接到数据库。

我不确定是否在“auth”之后调用 multer，因为当我发送请求时，multer-config 中的 console.log(“test”) 应该显示在控制台“test”中，控制台中什么也没有出现，除非我更改后保存“multer-config”文件。

如果有人知道如何解决问题或在某个地方看到错误，我很感兴趣！

Answer 1

我发现错误：

返回（/back/app.js）：
替换

app.use('/api', express.static(path.join(__dirname, 'images')));

为

app.use('/images', express.static(path.join(__dirname, 'images')));

前面：
删除标题内容类型：

    await fetch("http://localhost:3000/api/sendTest",{
    method: 'POST',
    body: formData,
    headers:{"authorization": this.$store.state.jwt}
    });

然后现在文件已上传！

希望它对你有用:)