Vueはファイルのアップロードとダウンロード機能を実装します

URL を window.URL || window.webkitURL とします。
downloadUrl = URL.createObjectURL(blob || file);

ダウンロード URL と URL.revokeObjectURL(ダウンロード URL);

<テンプレート>
    <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>
</テンプレート>
 
<スクリプト>
    「axios」からaxiosをインポートします
    エクスポートデフォルト{
        名前: "attendPoint"、
        データ（） {
            戻る {、
                ファイル: null、
                ファイル名: "test.xlsx"
            }
        },
        メソッド: {
            // ファイルを選択 getFile(event) {
                this.file = イベントターゲットファイル[0];
            },
 
            // ファイルをアップロード (POST)
            アップロード（） {
                url = "http://localhost:3000/upload/test";
                formData を新しい FormData() にします。
                formData.append("名前", "zhangsan");
                formData.append("年齢", "18");
                formData.append("ファイル", this.file);
                設定 = {
                    ヘッダー: {
                        「コンテンツタイプ」: 「マルチパート/フォームデータ」
                    }
                }
                axios.post(url, formData, config).then((res) => {
                    this.fileName = res.data.downloadUrl;
                    this.$message.success("アップロードに成功しました!");
                }).catch(() => {
                    this.$message.error("まずファイルをアップロードしてください!");
                })
            },
 
            // リンク付きのファイルをダウンロードする (window.open)
            ダウンロードリンク() {
                if (this.fileName) {
                    window.open("http://localhost:3000/download/test?fileName=" + this.fileName);
                }
            },
 
            //バイナリストリームのダウンロード (GET)
            非同期ダウンロードBlobByGet() {
                urlGet = "http://localhost:3000/download/test?fileName=" + this.fileName; とします。
                fileData を axios.get(urlGet, { responseType: "blob" }) で待機します。
                URL を window.URL || window.webkitURL とします。
                downloadUrl = URL.createObjectURL(fileData.data); とします。
                a = document.createElement("a"); とします。
                a.href = ダウンロードUrl;
                a.download = this.fileName; //ダウンロード後のファイル名 a.click();
                a = ヌル;
                ダウンロード URL と URL.revokeObjectURL(ダウンロード URL);
            },
 
            //バイナリストリームのダウンロード（POST）
            非同期ダウンロードBlobByPost() {
                urlPost = "http://localhost:3000/download/post/test" とします。
                fileData = axios({ を待ちます
                    メソッド: "post",
                    url: urlPost, // リクエスト アドレス data: { fileName: this.fileName }, // パラメーター responseType: "blob" // サーバーから返されるデータ タイプを示します })
                URL を window.URL || window.webkitURL とします。
                downloadUrl = URL.createObjectURL(fileData.data); とします。
                a = document.createElement("a"); とします。
                a.download = this.fileName;
                a.href = ダウンロードUrl;
                クリック();
                a = ヌル;
                ダウンロード URL と URL.revokeObjectURL(ダウンロード URL);
            },
        },
    }
</スクリプト>
 
<スタイルスコープ>
    .btnボックス{
        パディング: 20px;
    }
    .elボタン、
    入力{
        最大幅: コンテンツに適合;
        表示: ブロック;
        マージン: 20px;
    }
</スタイル>