Laravel 5.2 不允许加载本地资源：从存储文件夹

Question

我正在尝试从 dropzone 中的存储文件夹中预加载图像。这就是我所拥有的：

AJAX

$.ajax({
    url: "suspect_images",
    data: { id: $('input[name=b_id]').val(), _token: $('input[name=_token]').val()},
    dataType: 'json',
    type: 'GET',
    success: function (data) {
        $.each(data.images, function (key, value) {
            var file = {name: value.original, size: value.size};
            dropZone.options.addedfile.call(dropZone, file);
            dropZone.options.thumbnail.call(dropZone, file, value.path + value.server);
            dropZone.emit("complete", file);
            dropZone.files.push(file);
        });
    },
    error: function (data) {

    }
}, "json")

控制器

$images = Mugshots::select("AccusedID", "FileName", "OriginalFileName")->where("AccusedID", "=", $request->input('id'))->get();

$imageAnswer = [];

foreach ($images as $image) {
    $imageAnswer[] = [
        'original' => $image->OriginalFileName,
        'server' => $image->FileName,
        'size' => File::size(storage_path() . '/uploads/images/suspects/' . $request->input('id') . '/full_size/' . $image->FileName),
        'path' => storage_path() . '/uploads/images/suspects/' . $request->input('id') . '/full_size/'
    ];
}

return response()->json([
    'images' => $imageAnswer
]);

返回

Not allowed to load local resource: file:///C:/xampp/htdocs/IMS/storage/uploads/images/suspects/2/full_size/file.jpg

现在，如果我的图像位于公共文件夹中，这可能会起作用。但出于安全原因，我必须将其存储在存储文件夹中。当我粘贴 url 但不能在 javascript 中时，我可以通过浏览器访问文件。我认为这可能是因为权限。如何从存储文件夹中加载文件并将其显示在 dropzone 上？

我问的是把它加载到dropzone而不是image标签。

Answer 1

浏览器不允许从您的硬盘加载文件。如果您不想将文件放在公用文件夹中，我有一个选择。

$path = storage_path('path/to/your/file.extension');
$data = file_get_contents($path);
$type = pathinfo($path, PATHINFO_EXTENSION);
$base64 = base64_encode($data);

$src = 'data:image/' . $type . ';base64,' . $base64;

return "<img src={$src} />";

想法是获取文件内容并编码为base64，然后您可以响应您的观点，Laravel 可能有这种过程的 API。

Answer 2

我认为您可以调用或设置一个 {symbolic link} 将您的 {image file} 引用到您的 [storage] 目录。 参考：http://php.net/manual/en/function.symlink.php

例如：

$sUploadImage = $image->getFilename();
$sStoragePath = storage_path() . '/uploads/images/suspects/' . $request->input('id') . '/full_size/';
$sPublicPath = public_path(). '/uploads/images/suspects/' . $request->input('id') . '/full_size/';
if (is_dir($sPublicPath) !== true) {
    mkdir($sPublicPath, 0755, true); // This would create a new directory (e.g 'public/uploads/images/suspects/{id}/full_size/')
}

// If there's no symlink exists (e.g 'public/uploads/images/suspects/{id}/full_size/{filename.png}', create a new one
if (is_link($sPublicPath . '/' . $sUploadImage) !== true) {
    symlink($sStoragePath . '/' . $sUploadImage, $sPublicPath . '/' . $sUploadImage);
}

通过这种方式，您有一个“快捷链接”，可以将图像从 [storage] 目录引用到 [public] 目录。

然后替换 {$imageAnswer} 数组中的 {size} 和 {path} 键。

'size' => File::size($sPublicPath . '/' . $sUploadImage),
'path' => $sPublicPath . '/' . $sUploadImage

然后您现在可以像 @hassan 在 cmets 中提到的那样使用 dropzone 中的那些 {images}。

希望这对您的情况有所帮助。