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;

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

相关文章

  • express中间件加载机制示例详解

    express中间件加载机制示例详解

    中间件是一种方法,可以接收客户端发来的请求,可以对请求做出响应,也可以将请求继续交给下一个中间件继续处理,下面这篇文章主要给大家介绍了关于express中间件加载机制的相关资料,需要的朋友可以参考下
    2022-08-08
  • Node.js 异步编程之 Callback介绍(一)

    Node.js 异步编程之 Callback介绍(一)

    这篇文章主要介绍了Node.js 异步编程之 Callback介绍(一),本文用实例讲解Callback的相关知识,本文是第一篇,下一篇小编会跟进,需要的朋友可以参考下
    2015-03-03
  • node.js实现逐行读取文件内容的代码

    node.js实现逐行读取文件内容的代码

    这篇文章主要介绍了node.js实现逐行读取文件内容的代码,本文还介绍了一个node.js的按行读取内容开源项目,需要的朋友可以参考下
    2014-06-06
  • 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

    基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap
    2017-01-01
  • 浅析Node在构建超媒体API中的作用

    浅析Node在构建超媒体API中的作用

    超媒体即Hypermedia,是一种采用非线性网状结构对块状多媒体信息(包括文本、图像、视频等)进行组织和管理的技术。超媒体的概念类似于早期的超文本,超文本的本质是在文本内容加上链接,这样就构成了超文本。超媒体也类似。
    2014-07-07
  • node.js去水印方法实例分析

    node.js去水印方法实例分析

    这篇文章主要介绍了node.js去水印方法,结合实例形式分析了node.js基于第三方平台实现去水印的相关交互与操作技巧,需要的朋友可以参考下
    2023-04-04
  • node错误处理与日志记录的实现

    node错误处理与日志记录的实现

    这篇文章主要介绍了node错误处理与日志记录的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • nodejs批量修改文件编码格式

    nodejs批量修改文件编码格式

    本文给大家分享一段代码,主要是解决了在项目中遇到的一个问题,批量将GBK编码转换为UTF8,非常实用,推荐给大家。
    2015-01-01
  • 在Node.js应用程序中处理大数的操作指南

    在Node.js应用程序中处理大数的操作指南

    在JavaScript生态系统中,你可以使用BigInt来处理大整数,但是,你也可以使用具有类似于BigInt功能的第三方库,本文将是使用BigInt和提供类似功能的流行库管理大数的完整指南,我们还将比较第三方库的用例、优势和劣势
    2023-06-06
  • nodejs的错误处理过程记录

    nodejs的错误处理过程记录

    这篇文章主要给大家介绍了关于nodejs的错误处理过程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论