在阿贾克斯莫代尔>文件（$ pathToFile） - Laravel调用响应（）

Question

因为我不喜欢默认的方式将文件提交给当用户“返回响应（） - >文件（$ pathToFile）;”叫我想做一个版本，其中一个文件的心不是direcly显示在网站的当前选项卡，而是在一个弹出式模态 - 有点像当你预览在Dropbox的文件及其如何做。

因此，我所做的就是添加一个按钮，我认为我的路线“preview_modal”呼吁这条路线然后调用我的FileController我“preview_modal”的方法。此方法返回的模态所要求的文件。

但可悲的是，当请求文件的MIME类型不是“文字/ *”类型的文件，我得到这样的在我的情态呈现在我面前的文字：

�PNG  IHDRq�:sRGB���gAMA���a pHYs���o�d   *IDATx^��r�6��~ Ob~��jn9�-��.Q�v˖-��ʥ��`ip���L��d��?�E����'0�0�M�afİ�3Ì6q�a��&�03b���aF����L&�V���H|�̏t[���kȲ�01����,�|�r�b��`����㙮�|:��/���� r/[X�>`�]��KH���5�Oޟa� ��N�A�|��KX��2�:γ�d ٢��,�

在这种情况下，它是当时正在开一个PNG。此文字只是一个小例子。

我不知道在看如果有谁知道这是什么，我将不胜感激什么即时通讯。 “返回响应（） - >文件（）”如果它不是叫里面的AJAX模式正常工作在同一个文件。

按钮：

<button data-path="{{ route('files.preview_modal', $file) }}" class="button is-info load-ajax-modal" role="button" data-toggle="modal" data-target="#dynamic-modal">Preview</button>

AJAX调用：

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    }
});

$('.load-ajax-modal').click(function () {
    $.ajax({
        type: 'GET',
        url: $(this).data('path'),

        success: function (result) {
            $('#dynamic-modal div.modal-body').html(result);
        }
    });
});

路线：

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

preview_modal方法：

public function preview_modal(File $file)
{
  return response()->file(storage_path("$file->path"));
}

Answer 1

尝试最终这2个解决方案

1. storage_path("$file->path")删除双引号：storage_path($file->path)

因为你使用的变量不是字符串

2. 也许你应该将图像转换为base64。 qazxsw POI

然后用它在HTML享受一天队友:)

Answer 2

你是返回整个PNG作为响应只返回图像名称，然后在模态图像使用的任何路径：

$path = storage_path($file->path);
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

Answer 3

您可以访问存储文件夹中的公众只是你必须创建符号链接

执行 <img src="/images/{{ $imageName}}"> 在laravel创建符号链接

当您在laravel创建符号链接，那么它创建存储/程序/公共文件夹的符号链接到公共/存储文件夹。它的意思是，如果你想公开访问任何文件，然后将里面存储/程序/公共文件夹所有文件和访问它像这样

php artisan storage:link

这意味着文件test.png应在存储/应用/公/图片/文件夹是物理。

或者你可以公共文件夹中创建存储您的自定义符号链接，这样你就可以直接使用您存储文件夹图片

<img src="{{asset('storage/images/test.png')}}" alt="">

Answer 4

abc.com/storage/images/picture.png

然后在你的HTML，你会引用您的任何laravel路线/ outPutImage /仿佛它是一个形象，因为这正是它输出：

$file = '../image.jpg';
$type = 'image/jpeg';
header('Content-Type:'.$type);
header('Content-Length: ' . filesize($file));
readfile($file);