Vue實現檔案上傳和下載功能

阿新 • • 發佈：2021-09-22

本文例項為大家分享了 + 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.上傳和下載檔案

<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 http://www.cppcns.com 
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 = "httphttp://www.cppcns.com://localhost:3000/download/test?fileName=" + this.fileName;
                let fileData = await axios.get(urlGet,{ responseType: "blob" });
                leknMJumtCt 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。