前端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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue自定义右键菜单之全局实现
Apr 09 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
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python批量修改文件名的实现代码
2014/09/01 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python3 下载网络图片代码实例
2019/08/27 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python实现用户名密码校验
2020/03/18 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
财务人员的自我评价范文
2014/03/03 职场文书
小学生新年寄语
2014/04/03 职场文书
2014组织生活会方案
2014/05/19 职场文书
会计毕业生自荐书
2014/06/12 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL