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

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

(0)

相关推荐

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

  • 前端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(exp

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • SpringBoot文件分片上传的示例代码

    目录 背景 文件MD5计算 文件分片切割 文件分片接收 检查分片 保存分片 合并分片 云文件分片上传 阿里云OSS 华为云OBS Minio 背景 最近好几个项目在运行过程中客户都提出文件上传大小的限制能否设置的大一些,用户经常需要上传好几个G的资料文件,如图纸,视频等,并且需要在上传大文件过程中进行优化实时展现进度条,进行技术评估后针对框架文件上传进行扩展升级,扩展接口支持大文件分片上传处理,减少服务器瞬时的内存压力,同一个文件上传失败后可以从成功上传分片位置进行断点续传,文件上传成功后再次上

  • 使用HttpClient实现文件的上传下载方法

    1 HTTP HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源. 虽然在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能,但是对于大部分应用程序来说,JDK 库本身提供的功能还不够丰富和灵活.HttpClient 用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议. 一般的情况下我们都是使用Chrome或者

  • SocketIo+SpringMvc实现文件的上传下载功能

    socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址: https://github.com/fengcharly/sockeio-springMvcUpload.git 部分代码如下: 服务端的代码: ChuanServer: import java.io.*; import java.net.ServerSocket; import java.net.Socket; import java.nio.c

  • Java实现七牛云文件图片上传下载

    目录 一.准备工作 1.1.为什么选择七牛云? 1.2.七牛云注册 二.java操作七牛云对象存储下载 2.1.pom.xml引入依赖 2.2.上传下载具体代码 三.具体业务例子(七牛云做图片服务器–SpringBoot) 四.总结 一.准备工作 1.1.为什么选择七牛云? 免费 免费 免费 而且注册之后每个月 有免费100 万 次get请求. 10G免费空间,10G免费流量,对于搭建自己的博客网站已经绰绰有余了. 1.2.七牛云注册 注册七牛云账号 获取自己的AK,SK: 二.java操作七牛

  • ftp服务器搭建部署与C#实现ftp文件的上传的示例

    目录 一.简介 二.搭建FTP服务器步骤(Window sserver 2016为例) 三.登录测试 四.C#上传文件到FTP服务器 一.简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文本协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件.在ftp的使用当中,用户经常遇到两个概念:“下载”(Downloa

  • SpringMVC深入讲解文件的上传下载实现

    目录 SpringMVC文件下载 SpringMVC文件上传 1.基本介绍 2.需求分析/图解 3.应用实例 4.Debug-file.transferTo(目标文件) SpringMVC文件下载 说明: 在 SpringMVC 中,通过返回 ResponseEntity的类型,可以实现文件下载的功能 案例演示 1.修改 json.jsp <h1>下载文件的测试 </h1> <a href="<%=request.getContextPath()%>/d

  • vue实现大文件分片上传与断点续传到七牛云

    问题: 前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题: 1.文件过大,超出服务端的请求大小限制: 2.请求时间过长,请求超时: 3.传输中断,必须重新上传导致前功尽弃: 探索过程: 1.原先咨询过组里的大佬给我推荐了百度的webupload,但后来引入之后发现它是基于jquery封装的.由于本身项目是基于vue开发的所以与jquery相关的开源框架就尽量不考虑了. 2.后来查阅了资料后自己手动实现了文

随机推荐