如何使用Node.js的multer模块实现高效文件上传过程?

2026-04-01 14:272阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计786个文字,预计阅读时间需要4分钟。

如何使用Node.js的multer模块实现高效文件上传过程?

目录 + node + multer + 实现文件上传 + 介绍 + 实现node + express + multer + 实现单文件上传、下载 + routes/index.js + 下载文件接口需要写成GET请求方式 + node + multer + 实现文件上传 + 介绍 + 使用Node.js中的express框架

目录
  • node + multer 实现文件上传
    • 介绍
    • 实现
  • node+express+multer 实现单文件上传、下载
    • routes/index.js
    • 下载文件的接口需要写成get请求方式

如何使用Node.js的multer模块实现高效文件上传过程?

node + multer 实现文件上传

介绍

使用Node.js中的express框架和multer,实现文件的上传

实现

1. 前端

<el-upload         class="upload-demo"         action="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 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;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

本文共计786个文字,预计阅读时间需要4分钟。

如何使用Node.js的multer模块实现高效文件上传过程?

目录 + node + multer + 实现文件上传 + 介绍 + 实现node + express + multer + 实现单文件上传、下载 + routes/index.js + 下载文件接口需要写成GET请求方式 + node + multer + 实现文件上传 + 介绍 + 使用Node.js中的express框架

目录
  • node + multer 实现文件上传
    • 介绍
    • 实现
  • node+express+multer 实现单文件上传、下载
    • routes/index.js
    • 下载文件的接口需要写成get请求方式

如何使用Node.js的multer模块实现高效文件上传过程?

node + multer 实现文件上传

介绍

使用Node.js中的express框架和multer,实现文件的上传

实现

1. 前端

<el-upload         class="upload-demo"         action="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 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;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。