node + multer 实现文件上传过程

 更新时间:2022年09月06日 09:32:34   作者: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;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Node.js 多线程完全指南总结

    Node.js 多线程完全指南总结

    这篇文章主要介绍了Node.js 多线程完全指南总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Google官方支持的NodeJS访问API,提供后台登录授权

    Google官方支持的NodeJS访问API,提供后台登录授权

    Google官方支持的NodeJS集成客户端,用以访问Google APIs, 支持OAuth 2.0授信及登录认证。登录以后即可在后台访问例如 Google Drive(云存储), Google Analytics, Gmail等服务。
    2014-07-07
  • nodejs学习笔记之路由

    nodejs学习笔记之路由

    因为只是用于本地服务器用于自己测试用,所以不需要太完善的路由功能,所以也就不去使用express框架,而是自己实现一个简易路由,可以针对自己的需求来定制路由功能。
    2017-03-03
  • 比较node.js和Deno

    比较node.js和Deno

    这篇文章主要介绍了node.js和Deno的区别,对deno感兴趣的同学,可以参考下
    2021-04-04
  • Nodejs使用express 编写接口的实现

    Nodejs使用express 编写接口的实现

    express是一个第三方模块,支持丰富的api,本文主要介绍了Nodejs使用express 编写接口的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • nodejs处理http请求实例详解之get和post

    nodejs处理http请求实例详解之get和post

    最近一段时间在学习前端向服务器发送数据和请求数据,下面这篇文章主要给大家介绍了关于nodejs处理http请求实例详解之get和post的相关资料,需要的朋友可以参考下
    2023-01-01
  • Node.js使用第三方插件nodemailer实现邮件发送示例

    Node.js使用第三方插件nodemailer实现邮件发送示例

    这篇文章主要为大家介绍了Node.js使用第三方插件nodemailer实现邮件发送示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 使用Nodejs连接mongodb数据库的实现代码

    使用Nodejs连接mongodb数据库的实现代码

    这篇文章主要介绍了使用Nodejs连接mongodb数据库的实现代码,需要的朋友可以参考下
    2017-08-08
  • 使用Node和Puppeteer实现批量生成PDF

    使用Node和Puppeteer实现批量生成PDF

    这篇文章主要为大家详细介绍了使用Node.js和Puppeteer库将网页内容转换为PDF文件的过程,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2024-11-11
  • Nodejs文件上传、监听上传进度的代码

    Nodejs文件上传、监听上传进度的代码

    这篇文章主要介绍了Nodejs文件上传、监听上传进度,本文通过实例代码给大家详细介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03

最新评论