Vue实现文件上传和下载功能
程序员文章站
2024-01-07 21:50:16
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下1、a标签download属性在h5中,为a标签新增了一个download属性,来直接文件的下载,文...
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下
1、a标签download属性
在h5中,为a标签新增了一个download属性,来直接文件的下载,文件名就是download属性文件名。
- download属性暂时只支持google chrome 和 mozilla firefox,其他浏览器均不支持该属性;
- download是h5新增的属性,h5以前没有该属性;
2、url.createobjecturl
url.createobjecturl()方法会根据传入的参数创建一个指向该参数对象的url,这个url的生命仅存在于它被创建的这个文档里,新的对象url指向执行的file对象或者是blob对象。
file对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个file对象。
blob对象,就是二进制数据,比如通过new blob()创建的对象就是blob对象,又比如在xmlhttprequest里,如果指定responsetype为blob,那么得到的返回值也是一个blob对象。
let url = window.url || window.webkiturl; let downloadurl = url.createobjecturl(blob || file);
3、url.revokeobjecturl
url.revokeobjecturl()方法会释放一个通过url.createobjecturl()创建的对象url,如果不再需要这个对象,就要释放它,被释放掉以后,这个对象url就不再指向指定的文件了。
downloadurl && url.revokeobjecturl(downloadurl);
4、vue.js上传和下载文件
<template> <div class="btn-box"> <h3>文件上传:</h3> <input class="file-input" type="file" @change="getfile($event)" /> <el-button type="primary" @click="upload">上传文件(post)</el-button> <h3>文件下载:</h3> <el-button type="primary" @click="downloadlink">下载带链接文件(window.open)</el-button> <el-button type="primary" @click="downloadblobbyget">二进制流下载(get)</el-button> <el-button type="primary" @click="downloadblobbypost">二进制流下载(post)</el-button> </div> </template> <script> import axios from "axios" export default { name: "attendpoint", data() { return {, file: null, filename: "test.xlsx" } }, methods: { // 选取文件 getfile(event) { this.file = event.target.files[0]; }, // 上传文件(post) upload() { let url = "http://localhost:3000/upload/test"; let formdata = new formdata(); formdata.append("name", "zhangsan"); formdata.append("age", "18"); formdata.append("file", this.file); let config = { headers: { "content-type": "multipart/form-data" } } axios.post(url, formdata, config).then((res) => { this.filename = res.data.downloadurl; this.$message.success("上传成功!"); }).catch(() => { this.$message.error("请先上传文件!"); }) }, // 下载带链接文件(window.open) downloadlink() { if (this.filename) { window.open("http://localhost:3000/download/test?filename=" + this.filename); } }, // 二进制流下载(get) async downloadblobbyget() { let urlget = "http://localhost:3000/download/test?filename=" + this.filename; let filedata = await axios.get(urlget, { responsetype: "blob" }); let url = window.url || window.webkiturl; let downloadurl = url.createobjecturl(filedata.data); let a = document.createelement("a"); a.href = downloadurl; a.download = this.filename;//下载后文件名 a.click(); a = null; downloadurl && url.revokeobjecturl(downloadurl); }, // 二进制流下载(post) async downloadblobbypost() { let urlpost = "http://localhost:3000/download/post/test"; let filedata = await axios({ method: "post", url: urlpost, // 请求地址 data: { filename: this.filename }, // 参数 responsetype: "blob" // 表明返回服务器返回的数据类型 }) let url = window.url || window.webkiturl; let downloadurl = url.createobjecturl(filedata.data); let a = document.createelement("a"); a.download = this.filename; a.href = downloadurl; a.click(); a = null; downloadurl && url.revokeobjecturl(downloadurl); }, }, } </script> <style scoped> .btn-box { padding: 20px; } .el-button, input { max-width: fit-content; display: block; margin: 20px; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。