您现在的位置是:网站首页> 编程资料编程资料
node + multer 实现文件上传过程_node.js_
2023-05-24
366人已围观
简介 node + multer 实现文件上传过程_node.js_
node + multer 实现文件上传
介绍
使用Node.js中的express框架和multer,实现文件的上传
实现
1. 前端
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; 以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- Vue源码学习defineProperty响应式数据原理实现_vue.js_
- 关于Vue组件间的常用传参方式_vue.js_
- Vue源码学习之数据初始化_vue.js_
- vue实现文字转语音功能详解_vue.js_
- vue 指令版富文本溢出省略截取示例详解_vue.js_
- Vue项目服务器部署刷新页面404问题及解决_vue.js_
- vue项目实现通过ip地址访问和localhost访问方式_vue.js_
- Vue使用Swiper封装轮播图组件的方法详解_vue.js_
- Vue3 KeepAlive实现原理解析_vue.js_
- ES6 关键字 let 和 ES5 及关键字 var 的区别解析_javascript技巧_
