node + multer 实现文件上传过程

这篇文章主要介绍了node + multer 实现文件上传过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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-600 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; 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。 

以上就是node + multer 实现文件上传过程的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程