Почему функция загрузки (созданная с использованием Vue JS и Laravel) приводит к повреждению файлов? - PullRequest
Новая
       46

Почему функция загрузки (созданная с использованием Vue JS и Laravel) приводит к повреждению файлов?

0 голосов
/ 09 марта 2020

В настоящее время я работаю над функцией загрузки, которая позволяет пользователям загружать файлы (всех типов), которые они загрузили. Функция загрузки работает (так как файлы отображаются в моей папке загрузок, а тип файла зарегистрирован на изображении, которое отображается рядом с именем файла), однако по какой-то причине все загруженные файлы считаются поврежденными или неверный формат.

Топор ios запрос (внутри метода): 

    downloadFile(file) {
        axios.get(window.routes.files.download.replace("_id_", file.id), {
            headers: {
                'Content-Type': 'multipart/form-data',
                'Accept': 'application/vnd.ms-excel'
            }
        })
            .then(function(response){
            if (!window.navigator.msSaveOrOpenBlob){
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', file.name);
                document.body.appendChild(link);
                link.click();
            }else{
                const url = window.navigator.msSaveOrOpenBlob(new Blob([response.data]),file.name);
            }
                console.log(response.data);
            })
            .catch(function(error){
                console.error(error);
                if (!!error.response) console.log(error.response);
            });
    },

Laravel маршрут: 

Route::get('files/{file}', 'FileController@downloadSomeFile')->name('files.download');

Мой контроллер: 

public function downloadSomeFile($id)
{
    $downloadFile = File::find($id);
    Storage::download(str_replace('/File', '', $downloadFile->path));
}

Есть ли способ это исправить?

Ниже приведен пример сообщения, которое я получаю при попытке открыть загруженный файл:

enter image description here

1 Ответ

0 голосов
/ 09 марта 2020

Вы должны установить responseType в вашем ajax, если вы хотите загрузить нетекстовый файл. 

downloadFile(file) {
    axios.get(window.routes.files.download.replace("_id_", file.id), {
        headers: {
            'Accept': 'application/vnd.ms-excel'
        },
        responseType: 'arraybuffer' //<-- here
    })
        .then(function(response){
        if (!window.navigator.msSaveOrOpenBlob){
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', file.name);
            document.body.appendChild(link);
            link.click();
        }else{
            const url = window.navigator.msSaveOrOpenBlob(new Blob([response.data]),file.name);
        }
            console.log(response.data);
        })
        .catch(function(error){
            console.error(error);
            if (!!error.response) console.log(error.response);
        });
},
...