Vue.js と Laravel を使用して画像をダウンロードする方法

Question

このボタンをクリックするとハイパーリンクボタンがあり、データベースから画像を取得し、laravelとvue jsを使用してユーザー側にダウンロードしたいと考えています。以下は私のスクリプトファイルのコードです

getImage: function() {
            axios.get('/getImage/' this.form.cashout_id )
            .then(関数(r)
                {
                const url = window.URL.createObjectURL(new Blob([r.data]));
                const link = document.createElement('a');
                リンク.href = URL;
                link.setAttribute('download', 'file.' r.headers.ext); //またはその他の拡張子
                document.body.appendChild(リンク);
                リンク.クリック();

                //ローダーを非表示にする
                i.loader = false
            })
            .catch(関数 (エラー) {
                        アラート('エラー');
            });
        },

これは、画像を取得しているコントローラー コードです。

パブリック関数 getimage($id)
   {
       $cashout = CashOutDetail::findormail($id);
       $storage_date = Carbon::parse($cashout['recorded_date']);

       応答を返す()->ダウンロード(
           storage_path('app/cashoutdetails/'. $storage_date->year .'/' . $storage_date->format('M') . '/'. $cashout->bank_receipt),
           'ファイル名.jpg',
           ['コンテンツタイプ' => '画像/jpg']
       );
   }

問題は、画像がフェッチされてコンソール ウィンドウに表示されますが、ダウンロードされないことです。誰か助けてくれませんか？

Answer 1

你应该尝试：

axios({
    メソッド: 'GET'、
    URL: '/getImage/123.jpg',
    responseType: 'blob', // <-<<<<<<<<<< 
  }).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    リンク.href = URL;
    link.setAttribute('ダウンロード', '123.jpg');
    document.body.appendChild(リンク);
    リンク.クリック();
  });