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

 更新时间:2021年12月31日 16:55:29   作者:lxslxskxs  
本文主要介绍了前端vue+express实现文件的上传下载示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

新建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>

在这里插入图片描述

第一种: 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)
      })
    },

在这里插入图片描述

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

在这里插入图片描述

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

image.png

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

相关文章

  • 详细解读VUE父子组件的使用

    详细解读VUE父子组件的使用

    这篇文章主要介绍了详细解读VUE父子组件的使用,今天来讲一种子父组件深度耦合的方式,使我们不用额外的创建新的组件,也可以达到一些效果,下面与你们分享一下
    2023-05-05
  • vuex进阶知识点巩固

    vuex进阶知识点巩固

    本片文章是小编在网上整理的关于VUEX进阶的相关知识点内容,对此有兴趣的朋友可以跟着学习参考下。
    2018-05-05
  • 基于Vue.js 实现简易拖拽指令

    基于Vue.js 实现简易拖拽指令

    在 Vue.js 中,我们可以通过自定义指令的方式来实现拖拽功能,使得代码更加模块化和可复用,本文将介绍如何基于 Vue.js 实现一个简易的拖拽指令,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vuex + axios 做登录验证 并且保存登录状态的实例

    vuex + axios 做登录验证 并且保存登录状态的实例

    今天小编就为大家分享一篇vuex + axios 做登录验证 并且保存登录状态的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue-Jest 自动化测试基础配置详解

    Vue-Jest 自动化测试基础配置详解

    目前开发大型应用,测试是一个非常重要的环节,而在 Vue 项目中做单元测试可以用 Jest,本文主要介绍了Vue-Jest 自动化测试,感兴趣的可以了解一下
    2021-07-07
  • vue如何监听页面缓存事件

    vue如何监听页面缓存事件

    这篇文章主要介绍了vue如何监听页面缓存事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue $mount实战之实现消息弹窗组件

    Vue $mount实战之实现消息弹窗组件

    这篇文章主要介绍了Vue $mount实现消息弹窗组件的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)

    vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)

    这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue过滤器使用方法详解

    Vue过滤器使用方法详解

    过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论