返回顶部
首页 > 资讯 > 前端开发 > JavaScript >node + multer 实现文件上传过程
  • 285
分享到

node + multer 实现文件上传过程

2024-04-02 19:04:59 285人浏览 安东尼
摘要

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

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请求方式


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);
    }
  })
})

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;

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

--结束END--

本文标题: node + multer 实现文件上传过程

本文链接: https://lsjlt.com/news/166905.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • node + multer 实现文件上传过程
    目录node + multer 实现文件上传介绍实现node+express+multer 实现单文件上传、下载routes/index.js下载文件的接口需要写成get请求方式no...
    99+
    2024-04-02
  • 怎么用node+multer中间件实现单文件、多文件上传
    本篇内容介绍了“怎么用node+multer中间件实现单文件、多文件上传”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能...
    99+
    2024-04-02
  • nodejs multer实现文件上传与下载
    本文实例为大家分享了nodejs实现文件上传下载的具体代码,供大家参考,具体内容如下 1.介绍 做了一个关于文件上传和下载的demo ,选择了Multer 作为中间件进行数据处理。 关于multer请参...
    99+
    2022-06-04
    文件上传 nodejs multer
  • 关于node使用multer进行文件的上传与下载
    首先了解下浏览器的自动下载: 使用Express静态资源中间件的默认行为是在浏览器中展示静态文件,而不是自动下载。 如果需要访问静态资源时自动下载,可以在HTTP响应中设置Conte...
    99+
    2023-05-16
    node multer multer上传下载
  • node+multiparty如何实现文件上传
    这篇文章主要讲解了“node+multiparty如何实现文件上传”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“node+multiparty如何实现文件上...
    99+
    2024-04-02
  • Nodejs中怎么利用express和multer实现文件上传
    这期内容当中小编将会给大家带来有关Nodejs中怎么利用express和multer实现文件上传,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。非常简单,一行命令。npm&...
    99+
    2024-04-02
  • Ajax如何配合node.js multer实现文件上传功能
    小编给大家分享一下Ajax如何配合node.js multer实现文件上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!说明作为一个node 初学者,最近在做一个聊天软件,支持注册、登录、在线单人、多人聊天、表情发送、...
    99+
    2023-06-08
  • express文件上传中间件Multer详解
    前言 Express默认并不处理HTTP请求体中的数据,对于普通请求体(JSON、二进制、字符串)数据,可以使用body-parser中间件。而文件上传(multipart/form-data请求),可以基...
    99+
    2022-06-04
    详解 文件上传 中间件
  • 如何使用express+multer实现node中的图片上传功能
    小编给大家分享一下如何使用express+multer实现node中的图片上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容介绍如下所示:在前端中,我们使用ajax来异步上传图...
    99+
    2024-04-02
  • Nodejs进阶:基于express+multer的文件上传实例
    概览 图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持。 常用的开源组件有multer、formidable等,借助这两个开源组件,可以轻松搞定图片上传。 本文主要讲解以下内容...
    99+
    2022-06-04
    进阶 文件上传 实例
  • Vue+Node实现大文件上传和断点续传
    目录源代码Blob.slice切片初始化文件内容FormData.append()大文件上传断点续传代码创建切片源码worker 线程通讯的逻辑断点续传秒传源代码 断点续传、分片上传...
    99+
    2024-04-02
  • Vue+axios+Node+express如何实现文件上传
    小编给大家分享一下Vue+axios+Node+express如何实现文件上传,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Vu...
    99+
    2024-04-02
  • node.js使用multer中间件上传文件的方法
    这篇文章主要介绍了node.js使用multer中间件上传文件的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。body-parser中间件,其实“极不完美” —— 它只能...
    99+
    2023-06-06
  • node文件上传功能简易实现代码
    找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址 1. 开始 开始第一步,自然就是安装模块,不多说 npm in...
    99+
    2022-06-04
    简易 文件上传 代码
  • node+axios实现服务端文件上传示例
    目录一、接口文档介绍二、文件上传2-1.初始化项目2-2.安装插件依赖2-3.上传核心代码2-4.执行脚本最近调研企业wx集成H5应用,其中有一个发送图文消息,需要上传图片到临时素材...
    99+
    2024-04-02
  • Node交互式的SFTP上传实现过程剖析
    目录背景存在问题查阅资料最后的实现总结背景 由于业务的原因,我们日常的测试环境,都是通过脚本,将本地打包的代码,进行SFTP上传到对应的测试机目录的(这个业务在测试环境没有CI/CD...
    99+
    2022-11-13
    Node交互式SFTP上传 Node交互式SFTP
  • SpringMVC实现文件上传下载的全过程
    目录前言一、通用配置二、实现文件下载,上传功能总结前言 文件的上传和下载都是基于io复制,只不过 文件上传是浏览器向服务器发送报文 文件下载是服务器向浏览器发送报文 提示:以下是本篇...
    99+
    2024-04-02
  • Vue+Node怎么实现大文件上传和断点续传
    本篇内容介绍了“Vue+Node怎么实现大文件上传和断点续传”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!源代码断点续传、分片上传、秒传、重...
    99+
    2023-06-30
  • React+Node实现大文件分片上传、断点续传秒传思路
    目录1、整体思路2、实现步骤2.1 文件切片加密2.2 查询上传文件状态2.3 秒传2.4 上传分片、断点续传2.5 合成分片还原完整文件3、总结4、后续扩展与思考5、源码1、整体思...
    99+
    2024-04-02
  • Spring boot实现文件上传实例(多文件上传)
    文件上传主要分以下几个步骤:(1)新建maven java project;(2)在pom.xml加入相应依赖;(3)新建一个表单页面(这里使用thymleaf);(4)编写controller;(5)测试;(6)对上传的文件做一些限制;(...
    99+
    2023-05-31
    spring boot 文件上传
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作