Laravel Calling response()->file($pathToFile) in a Ajax Modal



由于我不喜欢当调用"return response()->file($pathToFile);"时向用户显示文件的默认方式,我想制作一个版本,其中文件不直接显示在网站的当前选项卡中,而是显示在弹出的模式中-有点像在Dropbox中预览文件时的操作方式。

所以我所做的是在我的视图中添加一个按钮,它调用我的Route"preview_mode"This Route,然后在我的FileController中调用我的"preview_Mode"方法。此方法在模态中返回请求的文件。

但遗憾的是,当请求文件的Mimetype不是"text/*"类型的文件时,我会在我的模式中收到这种文本:

�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��&�03b���aF����L&�V���H|�̏t[���kȲ�01����,�|�r�b��`����㙮�|:��/���� r/[X�>`�]��KH���5�Oޟa� ��N�A�|��KX��2�:γ�d ٢��,�

在这种情况下,它是一个巴布亚新几内亚,正在被打开。这个文本只是一个小例子。

我不知道我在看什么。如果有人知道这是什么,我将不胜感激。如果没有在ajax模式中调用"return response()->file()",那么它对同一个文件来说效果很好。

按钮:

<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_mode方法:

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

尝试最终的这两个解决方案

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

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

  1. 可能是您应该将图像转换为base64。

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

然后在html中使用它享受一天的伴侣:)

您正在返回整个png作为响应,只需返回图像名称,然后在模态中使用图像的任何路径:

<img src="/images/{{ $imageName}}">

您只需创建符号链接就可以访问公共存储文件夹

执行php artisan storage:link以在laravel 中创建符号链接

当你在laravel中创建symlink时,它会创建storage/app/public文件夹到public/storage文件夹的symlink。这意味着,如果你想公开访问任何文件,那么把你的所有文件放在存储/应用程序/公用文件夹中,然后像这个一样访问它

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

这里的意思是文件test.png应该在storage/app/public/images/文件夹中。

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

abc.com/storage/images/picture.png
$file = '../image.jpg';
$type = 'image/jpeg';
header('Content-Type:'.$type);
header('Content-Length: ' . filesize($file));
readfile($file);

然后在你的HTML中,你会引用你的任何laravel路由/outPutImage/,就好像它是一个图像一样,因为这正是它输出的:

<img src="appurl.com/outPutImage" />

最新更新