axios 为什么我的下载功能(使用Vue JS和Laravel创建)会导致文件损坏?

pcww981p  于 2023-10-18  发布在  iOS
关注(0)|答案(2)|浏览(169)

我目前正在开发一个下载功能,允许用户下载他们上传的文件(所有类型)。下载功能可以正常工作(如文件出现在我的下载文件夹中,文件类型在文件名旁边的图像中注册),但由于某种原因,我下载的所有文件都被视为损坏或格式错误。
Axios请求(在方法中):

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

有办法解决吗?
下面是我尝试打开下载的文件时收到的消息的示例:

np8igboo

np8igboo1#

如果你想下载一个非文本文件,你必须在你的目录中设置一个responseType。

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

jfewjypa2#

在我的情况下,当你下载了很多文件,它会发生
我固定像:

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

由于输出缓冲区内存已满,本例将帮助您清理它。

相关问题