Comment télécharger des images à l'aide de Vue.js et Laravel

Question

J'ai un bouton hyperlien en cliquant sur ce bouton et je souhaite obtenir l'image de la base de données et la télécharger côté utilisateur en utilisant laravel et vue js. Vous trouverez ci-dessous le code de mon fichier de script

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');
            });
        },

Maintenant, c'est mon code de contrôleur qui obtient l'image.

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

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

Le problème est que mon image est récupérée et affichée dans la fenêtre de la console, mais pas téléchargée. Quelqu'un peut-il m'aider ?

Answer 1

Tu devrais essayer :

axios({
    method: 'GET',
    url: '/getImage/123.jpg',
    responseType: 'blob', // <-<<<<<<<<<< 
  }).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '123.jpg');
    document.body.appendChild(link);
    link.click();
  });