node + multer 实现文件上传过程
作者:Tangctt
这篇文章主要介绍了node + multer 实现文件上传过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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请求方式
/* * @Author: 471826078@qq.com * @Date: 2020-05-21 09:48:04 * @LastEditors: 471826078@qq.com * @LastEditTime: 2020-06-12 14:42:17 */ 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); } }) }) /* GET home page. */ 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;
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。