vue前端实现上传下载文件,vue实现文件夹的上传
本文主要详细介绍Vue的文件上传和下载功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现文件上传下载的具体代码，供大家参考。具体内容如下
1、a标签download属性
在H5中，A标签上加了一个下载属性直接下载文件，文件名就是下载属性的文件名。
下载属性暂时只支持Google Chrome和Mozilla Firefox，其他浏览器不支持该属性；
下载是H5的新属性，以前没有；
2、URL.createObjectURL
URL.createObjectURL()方法将根据传入的参数创建一个指向parameter对象的URL。此URL的生命仅存在于创建它的文档中。新的对象URL指向执行的文件对象或Blob对象。
文件就是文件。例如，如果我使用输入type=file 标签上传一个文件，那么其中的每个文件都是一个file对象。
对象是二进制数据。例如，newBlob()创建的对象是一个Blob对象。例如，在XMLHttpRequest中，如果将responseType指定为blob，则返回值也是blob对象。
设URL=window。URL window.webkitURL
let download URL=URL . createobjecturl(blob file)；
3、URL.revokeObjectURL
URL.revokeObjectURL()方法将释放由URL.createObjectURL()创建的对象URL。如果不再需要该对象，它将被释放。释放后，对象URL将不再指向指定的文件。
download URL URL . revokeobjecturl(download URL)；
4、Vue.js上传和下载文件
模板
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= Download link 下载链接的文件(window.open)/el-button
El-button type= primary @ click= downloadblobbyget 二进制流下载(GET)/el-button
El-button type= primary @ click= downloadblobbypost 二进制流下载(POST)/el-button
/div
/模板
脚本
从“axios”导入axios
导出默认值{
姓名：注意点，
data() {
返回{，
文件：空，
文件名：“test.xlsx”
}
},
方法：{
//选择文件
getFile(事件){
this . file=event . target . files[0]；
},
//上传文件(POST)
上传(){
let URL= http://localhost:3000/upload/test ；
let formData=new formData()；
formData.append(name ，张三)；
formData.append(age ， 18 )；
formData.append(file ，this . file)；
让配置={
标题：{
“内容类型”:“多部分/形式数据”
}
}
axios.post(url，formData，config)。然后((res)={
this . filename=RES . data . download URL；
这个。$message.success(上传成功！);
}).catch(()={
这个。$message.error(请先上传文件！);
})
},
//下载链接文件(window.open)
downloadLink() {
如果(this.fileName) {
window . open( http://localhost:3000/download/test？fileName= this . fileName)；
}
},
//下载二进制流(GET)
异步下载BlobByGet() {
let URL get= http://localhost:3000/download/test？fileName= this.fileName
let file data=await axios . get(URL get，{ response type: blob })；
设URL=window .URL window.webkitURL
让下载网址=网址。createobjecturl(文件数据。数据)；
设a=文件。createelement( a )；
a.href=downloadUrl
答。下载=this.fileName//下载后文件名
答。单击()；
a=空；
下载网址。revokeobjecturl(下载网址)；
},
//二进制流下载（帖子)
异步下载BlobByPost() {
let URL post= http://localhost:3000/download/post/test ；
让fileData=await axios({
方法： post ，
url: urlPost，//请求地址
数据：{文件名：this.fileName }，//参数
responseType: blob //表明返回服务器返回的数据类型
})
设URL=window .URL window.webkitURL
让下载网址=网址。createobjecturl(文件数据。数据)；
设a=文件。createelement( a )；
答。下载=this .文件名
a.href=downloadUrl
答。单击()；
a=空；
下载网址。revokeobjecturl(下载网址)；
},
},
}
/脚本
样式范围。btn-box {
填充：20px
}。埃尔按钮，
输入{
最大宽度：适合内容；
显示：块；
边距：20px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。