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域名解析实现方法,结合实例形式详细分析了node.js使用dns.lookup()及dns.resolve4()进行域名解析的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-11-11
  • CentOS上安装Node.js和mongodb笔记

    CentOS上安装Node.js和mongodb笔记

    这篇文章主要介绍了CentOS上安装Node.js和mongodb笔记,本文讲解了Python安装、Node.js安装、npm安装、mongodb驱动安装、mongodb数据库操作测试代码等内容,需要的朋友可以参考下
    2015-04-04
  • 轻松创建nodejs服务器(10):处理上传图片

    轻松创建nodejs服务器(10):处理上传图片

    这篇文章主要介绍了轻松创建nodejs服务器(10):处理上传图片,本文是系列文章的最后一篇,包含了一个完整的处理上传图片的例子,需要的朋友可以参考下
    2014-12-12
  • 实例详解Nodejs 保存 payload 发送过来的文件

    实例详解Nodejs 保存 payload 发送过来的文件

    这篇文章主要介绍了实例详解Nodejs 保存 payload 发送过来的文件 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 使用 Node.js和Express搭建服务器的过程步骤详解

    使用 Node.js和Express搭建服务器的过程步骤详解

    Node.js 是一个开源、跨平台的 JavaScript 运行时环境,这篇文章主要介绍了如何使用 Node.js和Express搭建服务器,需要的朋友可以参考下
    2023-09-09
  • 基于node.js制作简单爬虫教程

    基于node.js制作简单爬虫教程

    这篇文章主要为大家详细介绍了基于node.js制作简单爬虫的教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Node.js+ES6+dropload.js实现移动端下拉加载实例

    Node.js+ES6+dropload.js实现移动端下拉加载实例

    这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下
    2017-06-06
  • 使用Express+Node.js对mysql进行增改查操作 

    使用Express+Node.js对mysql进行增改查操作 

    这篇文章主要介绍了使用Express+Node.js对mysql进行增改查操作,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • node.js实现端口转发

    node.js实现端口转发

    这篇文章主要为大家详细介绍了node.js实现端口转发的关键代码,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 如何能分清npm cnpm npx nvm

    如何能分清npm cnpm npx nvm

    这篇文章主要介绍了如何能分清npm cnpm npx nvm,本文就详细的来介绍一下区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论