使用Vue.js和Laravel下載映像的方法

Question

我點擊此按鈕有一個超連結按鈕，我想從資料庫獲取圖像並使用 laravel 和 vue js 將其下載到用戶端。下面是我的腳本文件代碼

getImage: function() {
            axios.get('/getImage/' this.form.cashout_id )
            .then(function (r)
                {
                const url = window.URL.createObjectURL(new Blob([r.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.' r.headers.ext); //or any other extension
                document.body.appendChild(link);
                link.click();

                //hide loader
                i.loader = false
            })
            .catch(function (error) {
                        alert('Error');
            });
        },

現在這是我正在獲取圖像的控制器程式碼。

public function getimage($id)
   {
       $cashout = CashOutDetail::findorfail($id);
       $storage_date = Carbon::parse($cashout['recorded_date']);

       return response()->down​​load(
           storage_path('app/cashoutdetails/'. $storage_date->year .'/' . $storage_date->format('M') . '/'. $cashout->bank_receipt),
           'filename.jpg',
           ['Content-Type' => 'image/jpg']
       );
   }

問題是我的圖像正在被獲取並顯示在控制台視窗中，但無法下載。有人可以幫忙嗎？

Answer 1

你應該嘗試：

axios({
    方法：'獲取'，
    url: '/getImage/123.jpg',
    回應類型: '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(連結);
    連結.click();
  });