前端vue+express实现文件的上传下载示例
更新时间:2022年1月1日 14:10 点击:804 作者:lxslxskxs
新建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文件上传下载内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/lxs19930928/article/details/122192837
下一篇: gojs实现蚂蚁线动画效果
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25