前端vue+express实现文件的上传下载示例


Posted in Vue.js onFebruary 18, 2022

新建server.js

yarn init -y
yarn add express nodemon -D
var express = require("express");
const fs = require("fs");
var path = require("path");
const multer = require("multer"); //指定路径的

var app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// 前端解决跨域问题
app.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});
// 访问静态资源
app.use(express.static(path.join(__dirname)));

// 文件上传
app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
  const { fieldname, originalname } = req.files[0];
  // 创建一个新路径
  const name = fieldname.slice(0, fieldname.indexOf("."));
  const newName = "public/" + name + path.parse(originalname).ext;
  fs.rename(req.files[0].path, newName, function (err) {
    if (err) {
      res.send({ code: 0, msg: "上传失败", data: [] });
    } else {
      res.send({ code: 1, msg: "上传成功", data: newName });
    }
  });
});
// 文件下载
app.get('/download', function(req, res) {
  res.download('./public/test.xls');
});

// 图片下载
app.get('/download/img', function(req, res) {
  res.download('./public/2.jpg');
});

let port = 9527;
app.listen(port, () => console.log(`端口启动: http://localhost:${port}`));

(1):前端文件上传请求

第一种: form表单

<form action="http://localhost:9527/upload" method="POST" encType="multipart/form-data">
      <input type="file" name="user"/>
      <input type="submit" />
    </form>

前端vue+express实现文件的上传下载示例

第一种: input输入框

<input type="file"  @change="changeHandler($event)"/>
     changeHandler(event) {
      let files  = event.target.files[0];
      console.log("files",files)
      let data = new FormData();
      data.append(files.name,files);
      console.log("data",data)
      axios.post("http://localhost:9527/upload",data,{
        headers:{
          "Content-Type":"multipart/form-data"
        }
      }).then(res =>{
        console.log("res",res)
      })
    },

前端vue+express实现文件的上传下载示例

(2):前端文件下载

第一种: 后端返回一个下载的链接地址,前端直接使用 即可
第二种: 使用二进制流文件下载

<input type="button" value="点击下载" @click="handleDownload">
      handleDownload() {  
    axios({  
      method: 'get',  
      url: "http://localhost:9527/download",  
      data: {    
        test: "test data"  
      },  
      responseType: "arraybuffer" // arraybuffer是js中提供处理二进制的接口
    }).then(response => {          
      // 用返回二进制数据创建一个Blob实例 
      if(!response) return;
      let blob = new Blob([response.data], {            
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
      }) // for .xlsx files          
      // 通过URL.createObjectURL生成文件路径          
      let url = window.URL.createObjectURL(blob) 
      console.log("url==========",url)        
      // 创建a标签          
      let ele = document.createElement("a")          
      ele.style.display = 'none'          
      // 设置href属性为文件路径,download属性可以设置文件名称          
      ele.href = url          
      ele.download = this.name          
      // 将a标签添加到页面并模拟点击          
      document.querySelectorAll("body")[0].appendChild(ele)          
      ele.click()          
      // 移除a标签          
      ele.remove()        
    });
  },

前端vue+express实现文件的上传下载示例

(3) 附加:二进制流图片的下载

// 二进制流图片文件的下载
  downLoadImg() {
     axios({
        method: 'get',
        url: `http://localhost:9527/download/img`,
        responseType: 'arraybuffer',
        params: {
          id: 12
        }
      }).then(res => {
        var src = 'data:image/jpg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
       // this.srcImg = src // 图片回显
        var a = document.createElement('a')
        a.href = src
        a.download = '2.jpg'
        a.click()
        a.remove()
      })
    }

前端vue+express实现文件的上传下载示例

到此这篇关于前端vue+express实现文件的上传下载示例的文章就介绍到这了,更多相关vue express文件上传下载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
python实现的文件夹清理程序分享
2014/11/22 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python日期相关操作实例小结
2019/06/24 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
空指针到底是什么
2012/08/07 面试题
求职信写作要突出重点
2014/01/01 职场文书
工作检讨书500字
2014/10/19 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP