你如何正确使用 express-fileupload答案

【问题标题】：How do you use express-fileupload correctly你如何正确使用 express-fileupload
【发布时间】：2020-07-01 07:51:16
【问题描述】：

我正在尝试集成 express-fileupload 以将图像上传到我的服务器。我已按照此链接中提供的示例 express-fileupload Examples 进行操作，但它不起作用。下面我列出了仅涉及相关代码行的每个文件。

index.ejs：相关行

<form method="post" action="/images" enctype="multipart/formdata">
    <div class="panel-body form-horizontal">
        <div class="form-group col-md-12">
            <label class="col-sm-2 control-label" for="file">Browse:</label>

            <div class="col-md-10">
                <input class="form-control" type="file" name="file" id="file">
            </div>
        </div>
    </div>
</form>

server.js

const express = require('express');
const config = require('./server/configure');
let app = new express();

app.set('port', process.env.PORT || 3300);

app = config(app);

app.listen(app.get('port'), () => {
    console.log(`Server up: http://localhost:${app.get('port')}`);
});

configure.js

const express = require('express');
const path = require('path');
const expressFileUpload = require('express-fileupload');
const routes = require('./routes');

module.exports = (app) => {

    // applying expressFileUpload middleware
    app.use(expressFileUpload());

    routes(app);

    app.use('/public/', express.static(path.join(__dirname, '../public')));
    return app;
};

routes.js

const image = require('../controllers/image');

module.exports = (app) => {
    app.post('/images', image.create);
};

image.js

module.exports = {

    create(req, res) {
        let image = req.files.file;
    }
}

错误

我在以下行 let image = req.files.file; 收到一个错误，其中指出，

TypeError: 无法读取未定义的属性“文件”

为什么文件未定义以及如何使用 express-fileunload 正确上传图片？

【问题讨论】：

标签： javascript node.js express

【解决方案1】：

您的节点 js 代码没有问题。它工作正常。问题在您的 HTML 文件中。

表单 enctype 必须是 enctype="multipart/form-data" 而不是您添加的内容。

这里是参考： HTML form submit how to: File Upload and email

【讨论】：

【解决方案2】：

在处理文件上传和快递时，我建议您使用Multer。

文件上传很棘手。

当一个或多个文件“到达”服务器时，您可以使用两种不同的方法来存储它们：

将文件保存到磁盘的已知安全位置
将文件保存在 RAM 内存中

这两种方法各有利弊。由您决定哪个更适合您的需求。

这是一个来自我的服务器的示例，用于处理用户个人资料图片的上传（GitHub 项目链接：HERE）。它是用打字稿写的，但语法几乎相同。

文件中间件 - FileMiddleware.ts

用于处理磁盘和内存存储的中间件。我可以选择哪一个最适合具体的快递路线（中间件下的例子）。

import path from 'path';
import multer from 'multer';

export default class FileMiddleware {
  public static readonly memoryLoader = multer({
    storage: multer.memoryStorage(),
    limits: {
      fileSize: 2097152, // 2 MByte
    },
  });

  public static readonly diskLoader = multer({
    storage: multer.diskStorage({
      destination: (_req, _file, cb) => {
        cb(null, path.join(__dirname, '../tmp/upload'));
      },
    }),
    limits: {
      fileSize: 67108864, // 64 MByte
    },
  });
}

用户路由 - user.ts

处理头像文件上传的用户路由。您可以看到我正在定义路径、文件中间件（在这种情况下是内存存储 - 由图像键标识的单个文件）和用于处理进程的控制器。

import { Router } from 'express';
import { UserController } from '@app/controller';
import { FileMiddleware } from '@app/middleware';

const router = Router();

router.post(
  '/user/avatar',
  FileMiddleware.memoryLoader.single('image'),
  UserController.updateAvatar
);

export default router;

在控制器中，您可以使用 req.file 检索图像，就这么简单。

正如我所说的使用Multer，配置和使用非常简单直观。

PS：请记住，使用带有表单的文件上传意味着添加 enctype="multipart/form-data"。

【讨论】：