我尝试使用Express.js和Multer从HTML表单上传文件。我设法将文件保存到所需位置(名为 uploads 的文件夹)。
但是,我想在上传时重命名该文件,因为默认情况下,Multer会给它一个奇怪的名称,例如:
5257ee6b035926ca99923297c224a1bb
可能是一个十六进制时间戳左右,但我需要一个更明确的名称,以便稍后调用它。
我已按照发现here的说明进行操作,但它不会做比以往更多的事情:使用hexa名称上传文件。
此外,似乎永远不会触发两个事件 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一般都不熟悉。
感谢您的帮助!
答案 0 :(得分:7)
我知道这篇文章已过时了。我想为那些可能晚些时候到达的人做出贡献。下面是一个功能齐全的服务器脚本,用于处理多个上传的图片,其中包含随机保存的图片名称和文件扩展名。
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);
});
答案 1 :(得分: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 })
答案 2 :(得分: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 })
答案 3 :(得分:1)
我个人实现了以下解决方案,它为文件生成一个随机名称并附加原始文件扩展名(我假设我的扩展名在最后一个之后。)
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不会为您的函数附加任何文件扩展名 应返回带有文件扩展名的文件名。
答案 4 :(得分:0)
文件的结构如下:
{
"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 })