使用 Multer 重命名上传的文件不起作用 (Express.js)

Posted 2023-02-22

【中文标题】使用 Multer 重命名上传的文件不起作用 (Express.js)

【英文标题】：Renaming an uploaded file using Multer doesn't work (Express.js)

【发布时间】：2015-11-18 00:16:52

【问题描述】：

我正在尝试使用 Express.js 和 Multer 从 html 表单上传文件。我已设法将文件保存到所需位置（名为 uploads 的文件夹）。

但是，我想在上传文件时重命名文件，因为默认情况下，Multer 给它一个奇怪的名称，例如：

5257ee6b035926ca99923297c224a1bb

可能是一个十六进制的时间戳，但我需要一个更明确的名称，以便稍后在其上调用脚本。

我已经按照here 的解释进行了操作，但它并没有做更多的事情：上传带有十六进制名称的文件。

此外，两个事件 onFileUploadStart 和 onFileUploadComplete 似乎从未被触发，因为我的控制台中没有记录任何内容。

我为服务器和路由使用了两个单独的文件：

app.js

/**
 * Dependencies
 */

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

/**
 * Importation of routes
 */
var routes = require('./routes/index');
var recog = require('./routes/recog');

/**
 * Express
 */
var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended: false));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// pour contrer les erreurs de cross domain
app.use(function (req, res, next) 

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
);

/**
 * Routes
 */
app.use('/', routes);
app.use('/recog', recog);

module.exports = app;

recog.js

/**
 * Requirements
 */
var express = require('express');
var router = express.Router();
var multer = require('multer');
var uploads = multer(
    dest: 'uploads/',
    rename: function (fieldname, filename) 
        console.log("Rename...");
        return filename + Date.now();
    ,
    onFileUploadStart: function () 
        console.log("Upload is starting...");
    ,
    onFileUploadComplete: function () 
        console.log("File uploaded");
    
);

/**
 * Upload d'une image
 */
router.post('/upload', uploads.single('image'), function (req, res, next) 
    console.log("Front-end is calling");
    res.json(status: 'success', data: 'Fichier chargé.\nOrgane sélectionné : ' + req.body.organ);
);

module.exports = router;

我一直在研究，但我不知道问题出在哪里，因为我对 Node.js 和 javascript 很陌生。

感谢你们的帮助！

【参考方案1】：

Multer 的用法发生了变化。

目前 Multer 构造函数只接受三个选项：

分布/存储 文件过滤器 限制

现在重命名、onFileUploadStart、onFileUploadComplete 将不起作用。

但是可以使用 DiskStorage 进行重命名

var storage = multer.diskStorage(
    destination: function (req, file, cb) 
        cb(null, '/tmp/my-uploads')
    ,
    filename: function (req, file, cb) 
        cb(null, file.fieldname + '-' + Date.now())
  
)

var upload = multer( storage: storage )

看看这些链接：

https://github.com/expressjs/multer multer callbacks not working ?

【参考方案2】：

我知道这篇文章已经过时了。我想为以后可能到达的人做出贡献。下面是一个功能齐全的服务器脚本，用于处理具有随机保存的图片名称和文件扩展名的多张上传图片。

var express = require("express");
var multer = require("multer");
var app = express();
var path = require("path");
var uuid = require("uuid");

// Allow cross origin resource sharing (CORS) within our application
app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
);

var storage = multer.diskStorage(
  destination: function (req, file, cb) 
    cb(null, 'uploadedimages/')
  ,
  filename: function (req, file, cb) 
    cb(null, uuid.v4() + path.extname(file.originalname));
  
)

var upload = multer( storage: storage )

// "files" should be the same name as what's coming from the field name on the client side.
app.post("/upload", upload.array("files", 12), function(req, res) 
    res.send(req.files);
    console.log("files = ", req.files);
);

var server = app.listen(3000, function() 
    console.log("Listening on port %s...", server.address().port);
);

当不需要动态上传目录时，

destination 也可以简单地为 string。即destination: "uploadedImages/" 而不是 destination: function (...

【参考方案3】：

试试我正在使用的这种方式

  var storage = multer.diskStorage(
    destination: function (req, file, cb) 
      cb(null, 'uploads/')
    ,
    filename: function (req, file, cb) 
      console.log(file);
      var fileObj = 
        "image/png": ".png",
        "image/jpeg": ".jpeg",
        "image/jpg": ".jpg"
      ;
      if (fileObj[file.mimetype] == undefined) 
        cb(new Error("file format not valid"));
       else 
        cb(null, file.fieldname + '-' + Date.now() + fileObj[file.mimetype])
      
    
  )

  var upload = multer( storage: storage )

【参考方案4】：

我们在日期的帮助下给文件一个随机名称，并在file.mimetype的帮助下附加原始文件扩展名

试试 console.log(file.mimetype) 你会得到用'/'分隔的文件名和扩展名，然后我将它拆分为数组并从中获取扩展名。 试试下面的代码。

let storage = multer.diskStorage(
  destination: function (req, file, cb) 
    cb(null, './uploads')
  ,
  filename: function (req, file, cb) 
    let extArray = file.mimetype.split("/");
    let extension = extArray[extArray.length - 1];
    cb(null, file.fieldname + '-' + Date.now()+ '.' +extension)
  
)
const upload = multer( storage: storage )

【参考方案5】：

文件的结构如下：

"fieldname": "avatar",
"originalname": "somefile.pdf",
"encoding": "7bit",
"mimetype": "application/pdf",
"destination": "./uploads",
"filename": "36db44e11b83f4513188f649ff445a2f",
"path": "uploads\\36db44e11b83f4513188f649ff445a2f",
"size": 1277191

下一个示例使用原始名称和扩展名保存文件，而不是像默认情况下那样使用奇怪的名称。 （代替“file.originalname”你可以随意保存）

var storage = multer.diskStorage(
  destination: function (req, file, cb) 
    cb(null, './uploads') //Destination folder
  ,
  filename: function (req, file, cb) 
    cb(null, file.originalname) //File name after saving
  
)

var upload = multer( storage: storage )

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案6】：

我个人实现了以下解决方案，它为文件生成一个随机名称并附加原始文件扩展名（我假设我的扩展名在最后一个 . 之后）

var path = require('path');

    var options = multer.diskStorage( destination : 'uploads/' ,
      filename: function (req, file, cb) 
        cb(null, (Math.random().toString(36)+'00000000000000000').slice(2, 10) + Date.now() + path.extname(file.originalname));
      
    );

    var upload= multer( storage: options );

    router.post('/cards', upload.fields([ name: 'file1', maxCount: 1 ,  name: 'file2', maxCount: 1 ]), function(req, res, next) 
    /*
      handle files here
      req.files['file1']; //First File
      req.files['file2']; //Second File
      req.body.fieldNames;//Other Fields in the form

    */
    );

在 MULTER 文档中，您会发现：

磁盘存储引擎让您可以完全控制将文件存储到 磁盘。

有两个选项可用，目的地和文件名。他们是 这两个函数都决定了文件的存储位置。

注意：您负责在提供时创建目录 目的地作为一个功能。传递字符串时，multer 将 确保为您创建了目录。

filename 用于确定文件在 文件夹。如果没有给出文件名，每个文件将被随机命名 不包含任何文件扩展名。

注意： Multer 不会为您添加任何文件扩展名，您的函数 应该返回一个带有文件扩展名的完整文件名。