[通过Vue.js中的Axios调用从本地存储（laravel）访问私有文件

Question

我正在使用Vue.js和Laravel进行SPA。我的问题是我无法获取存储在必须为私有的本地存储中的图像。该文件位于/Storage/app/private/privateImage.png

当然，我可以通过存储链接使用公共文件，但是在这种情况下，这不是一个选择，只要私有目录中的文件是私有文件，并且仅在进行某些验证后才显示。

这是我的控制器方法，它返回文件：

public function loadPrivateFile()
{
    $file_path = "/private/image2.png";

    if (!Storage::disk('local')->exists($file_path)) {
        return "doesnt exists";
    } else {
        // return "exists";
        $local_path = config('filesystems.disks.local.root') . DIRECTORY_SEPARATOR . $file_path;
        return response()->file($local_path);
    }
}

通过Axios调用此方法后，我什至可以在浏览器开发人员工具中将图像视为响应，但是我无法绑定到img标签。当我在不使用vue的情况下构建非SPA页面时，我在图像中的src内使用了路由功能，并且可以正常工作，但是现在我在Vue中，无法访问它。

我已经搜索了论坛，并且所有帖子都与公共存储有关，对于我而言，这不是解决方案。有什么方法可以做到这一点？

谢谢

Answer 1

您可以在服务器端将图像编码为base64字符串，然后在vue中将其绑定到：src属性，或者正常传输它，然后在客户端将其编码为base64字符串

查看this issue on the axios github页面