使用 laravel、vue、axios 和干预图像强制下载作为 http 响应返回的图像文件答案

【问题标题】：Force download image file that's returned as http response using laravel, vue, axios and intervention image使用 laravel、vue、axios 和干预图像强制下载作为 http 响应返回的图像文件
【发布时间】：2019-07-04 05:45:15
【问题描述】：

我正在尝试使用 Laravel、Vue、Axios 和 Intervention 图像建立一个媒体资产数据库。我希望用户能够在下载图像之前设置所需的图像高度和宽度。然后使用 axios 后请求将其发送到控制器。在控制器内部，干预图像正在发挥它的魔力（k）并返回我调整大小的文件作为响应。

现在我想要作为响应返回的图像来触发下载。我需要对我的 axios-response 做什么？

这是我目前拥有的：

Axios 请求：

resize(file) {
        this.file = file;

        let formData = new FormData();
        formData.append('imageHeight', this.imageHeight);
        formData.append('imageWidth', this.imageWidth);

        axios.post('files/resize/' + file.id, formData).then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.log(error);
            this.errors = error.response.data.errors;
            this.showNotification(error.response.data.message, false);
            this.fetchFile(this.activeTab, this.pagination.current_page);
        });
    }

控制器：

public function resize($id, Request $request)
{
    $file = File::where('id', $id)->where('user_id', Auth::id())->first();

    $originalImage = $file->getName($file->type, $file->name, $file->extension);
    $originalImagePath = Storage::get($originalImage);

    $imageHeight = $request['imageHeight'];
    $imageWidth = $request['imageWidth'];

    if ($img = Image::make($originalImagePath)) {
        return $img->resize($imageWidth,$imageHeight)->response();
    }
}

【问题讨论】：

标签： php laravel vue.js axios intervention

【解决方案1】：

您希望Content-Disposition 响应标头为attachment 而不是inline。

http://image.intervention.io/use/http

【讨论】：

谢谢。我仍然无法让它工作，因为显然出于安全原因 JavaScript 无法触发下载。