您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue如何實(shí)現(xiàn)文件上傳和下載功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
1、a標(biāo)簽download屬性
在H5中,為a標(biāo)簽新增了一個(gè)download屬性,來(lái)直接文件的下載,文件名就是download屬性文件名。
download屬性暫時(shí)只支持Google Chrome 和 Mozilla Firefox,其他瀏覽器均不支持該屬性;
download是H5新增的屬性,H5以前沒(méi)有該屬性;
2、URL.createObjectURL
URL.createObjectURL()方法會(huì)根據(jù)傳入的參數(shù)創(chuàng)建一個(gè)指向該參數(shù)對(duì)象的URL,這個(gè)URL的生命僅存在于它被創(chuàng)建的這個(gè)文檔里,新的對(duì)象URL指向執(zhí)行的File對(duì)象或者是Blob對(duì)象。
File對(duì)象,就是一個(gè)文件,比如我用input type="file"標(biāo)簽來(lái)上傳文件,那么里面的每個(gè)文件都是一個(gè)File對(duì)象。
Blob對(duì)象,就是二進(jìn)制數(shù)據(jù),比如通過(guò)new Blob()創(chuàng)建的對(duì)象就是Blob對(duì)象,又比如在XMLHttpRequest里,如果指定responseType為blob,那么得到的返回值也是一個(gè)blob對(duì)象。
let URL = window.URL || window.webkitURL; let downloadUrl = URL.createObjectURL(blob || file);
3、URL.revokeObjectURL
URL.revokeObjectURL()方法會(huì)釋放一個(gè)通過(guò)URL.createObjectURL()創(chuàng)建的對(duì)象URL,如果不再需要這個(gè)對(duì)象,就要釋放它,被釋放掉以后,這個(gè)對(duì)象URL就不再指向指定的文件了。
downloadUrl && URL.revokeObjectURL(downloadUrl);
4、Vue.js上傳和下載文件
<template> <div class="btn-box"> <h4>文件上傳:</h4> <input class="file-input" type="file" @change="getFile($event)" /> <el-button type="primary" @click="upload">上傳文件(POST)</el-button> <h4>文件下載:</h4> <el-button type="primary" @click="downloadLink">下載帶鏈接文件(window.open)</el-button> <el-button type="primary" @click="downloadBlobByGet">二進(jìn)制流下載(GET)</el-button> <el-button type="primary" @click="downloadBlobByPost">二進(jìn)制流下載(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("請(qǐng)先上傳文件!"); }) }, // 下載帶鏈接文件(window.open) downloadLink() { if (this.fileName) { window.open("http://localhost:3000/download/test?fileName=" + this.fileName); } }, // 二進(jìn)制流下載(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); }, // 二進(jìn)制流下載(POST) async downloadBlobByPost() { let urlPost = "http://localhost:3000/download/post/test"; let fileData = await axios({ method: "post", url: urlPost, // 請(qǐng)求地址 data: { fileName: this.fileName }, // 參數(shù) responseType: "blob" // 表明返回服務(wù)器返回的數(shù)據(jù)類型 }) 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>
以上是“Vue如何實(shí)現(xiàn)文件上傳和下載功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。