node + multer 实现文件上传
介绍
使用Node.js中的express框架和multer，实现文件的上传
实现
1. 前端
<el-upload
class="upload-demo"
action="http://localhost:5678/uploadModel"
:show-file-list="false"
:on-success="getUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
getUploadSuccess(res, file) {
// this.avatar = res.avatar;
// console.log(564);
this.$message({
type: "success",
message: "模型上传成功!",
});
},通过element ui组件库中的el-upload上传组件和el-button按钮
点击上传按钮，激活el-upload组件的action调用对应的后端接口
2. 后端接口
var multer = require('multer');
// 此操作会创建uploads文件夹，也可理解为最终存储的目标文件夹,服务启动就会自动创建
var upload = multer({ dest: 'Simulation_Model/' });
// 此操作理解为，将文件暂时储存在这个文件夹中
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './Simulation_Model')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
var upload = multer({ storage: storage })
// 调用接口，上传文件
app.post('/uploadModel', upload.single('file'), function (req, res, next) {
if (req.file === undefined) {
return res.send("模型上传失败！");
}
// fs.renameSync(oldpath, newpath);新路径和旧路径都要存在
// 将文件从旧文件夹剪切到新文件夹中，由于我们只需要一个文件夹，所以新路径与旧路径相同，
fs.renameSync('./Simulation_Model/' + req.file.filename, "./Simulation_Model/" + req.file.originalname);
res.send("模型上传成功！");
})上传成功后，文件保存在后端目录的Simulation_Model文件夹内
node+express+multer 实现单文件上传、下载
routes/index.js
- node express 部署到服务器，用pm2进行管理。启动的时候需要进去 /bin 目录
- 服务器 上传文件路径 ： “.. /public/uploads”
- 本地上传文件路径 ： “./public/uploads”
- 下载文件不能通过ajax请求和axios,需要通过a标签或者
window.location.herf = '下载文件接口'下载文件的接口需要写成get请求方式
var express = require('express');
var router = express.Router();
const multer = require('multer')
const path = require('path')
const http = require('http')
const fs = require('fs')
let upload = multer({
storage: multer.diskStorage({
destination: function (req, file, cb) {
// cb(null, './public/uploads'); //本地
cb(null, '../public/uploads'); //服务器
},
filename: function (req, file, cb) {
var changedName = new Date().toISOString().replace(/:/g, '-') +'-'+ file.originalname;
cb(null, changedName);
}
})
})
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});
//单个图片文件上传
router.post('/uploadImage', upload.single('file'), (req, res) => {
if (!req.file) { //判断一下文件是否存在，也可以在前端代码中进行判断。
res.json({
code: 0,
message: "上传文件不能为空！",
data: null
})
return false
}
//返回路径需要转义 否则会返回反斜杠格式数据 导致微信小程序识别不了本地图片 http://localhost:8888//uploads\images\1582511344098-1.jpg
let filePath = req.file.path;
let pathResult = filePath.split('\\').join('/');
res.json({
code: 1,
type: 'uploadImage',
message: "上传成功！",
data: req.file.path,
originalname: req.file.originalname,
path:'线上服务地址' + pathResult
})
});
//下载文件
router.get('/download',(req, res, next)=>{
const name = req.body.name;
console.log(name)
var path = '../public/download/'+ name;
var size = fs.statSync(path).size;
var f = fs.createReadStream(path);
res.writeHead(200, {
'Content-Type': 'application/force-download',
'Content-Disposition': 'attachment; filename=' + name,
'Content-Length': size
});
f.pipe(res);
})
module.exports = router;
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
