adsoftteam / uploadimage
将图片上传到内容类型文件夹。
2.0.21
2022-04-01 13:23 UTC
Requires
- php: >=7.0
- illuminate/http: >=6.0
- illuminate/support: >=6.0
- spatie/laravel-glide: ^3.0
README
适用于 Laravel 6.x / 7.x / 8.x
此包为您提供以下机会
- 轻松将图片文件上传到内容类型文件夹
- 为您的图片创建缩略图
- 您可以从磁盘轻松加载任何内容类型的图片(原始图片或缩略图图片)
- 您可以从磁盘轻松删除您的图片
- 您可以从包含相对链接的图片的正文文本中轻松删除所有图片
- 您可以在不将图片存储在磁盘上的情况下轻松创建预览图片
- 您可以使用 Ajax 在 WYSIWYG 编辑器中轻松上传/删除图片
- 您可以在图片上轻松添加水印
- 您可以将图片存储在磁盘上或以 Base64 格式存储在数据库中
历史
- v2.0.3 - 添加 uploadFile 方法以加载无图片文件
- v2.0.2 - 修复 Laravel 6.x 及更高版本中 str_random() -> replase Str:random() 的错误
- v2.0.1 - 缩略图可以在 upload($file, $contentName, $watermark = false, $video = false, $thumbnails = false) 方法中分配
- v2.0 - 支持 Laravel 5.5
- v1.0.70 - 为 WYSIWYG 编辑器添加到 config 'watermarkEditorStatus'。更改 UploadImageController
- v1.0.61 - 获取真实图片扩展名。
- v1.0.50 - 您可以禁用或启用水印。请参见下面的示例。
- v1.0.5 - 修复检查文件是否为图片的问题。
- v1.0.4 - 重新整理所有代码。添加异常,将数组更改为方法。修复一些错误。
- v1.0.3 - 修复一些错误。
- v1.0.2 - 用显示图片预览的功能替换方法,如果图片宽度小于设置文件中的图片宽度,则 upload 方法返回错误状态
- v1.0.1 - 修复一些错误
要求
- spatie/laravel-glide
- php gd 库
安装包
将包添加到您的项目中
composer require ADSoft/uploadimage
将以下条目添加到文件 config/app.php 中
部分提供者
'providers' => [ ....... Spatie\Glide\GlideServiceProvider::class, ADSoft\UploadImage\UploadImageServiceProvider::class, ]
部分外观
'aliases' => [ ....... 'GlideImage' => Spatie\Glide\GlideImageFacade::class, 'UploadImage' => ADSoft\UploadImage\UploadImageFacade::class, ]
在终端中输入以下命令
php artisan vendor:publish --provider="ADSoft\UploadImage\UploadImageServiceProvider"
将复制两个文件
config/upload-image.php - 这是 UploadImage 包的设置
resources/assets/js/upload_image_preview.js - 您应将此文件包含到 elixir/mix 中
打开文件 webpack.mix.js 并将 upload_image_preview.js 添加到数组中。例如
mix.sass('resources/assets/sass/app.scss', 'public/css/app.css').version(); mix.js(['resources/assets/js/app.js', 'resources/assets/js/upload_image_preview.js'], 'public/js/all.js').version();
在终端中执行命令后(针对生产环境)
npm run production
在您想使用 UploadImage 的控制器中添加命名空间 Facade
use UploadImage;
如果您想在文件输入字段中选择图片后看到预览图片,请将文件输入字段包装在以下代码中
<div class="image-preview-block">
<div class="image-preview-image"></div>
{!! Form::file('image', ['class' => 'image-preview-input']) !!}
</div>
您可以使用以下方法
从文件表单将您的图片上传到磁盘
/** * Upload image to disk. * * @param $file object instance image or image string * @param $contentName string content name (use for create and named folder) * @param bool $watermark bool watermark status (by default = false) * @param bool $video if true then add watermark with video player image to an image * @param bool $thumbnails create thumbnails for original image * * @return object image * @throws UploadImageException */ UploadImage::upload($file, $contentName, $watermark = false, $video = false, $thumbnails = false)
例如:将以下内容添加到您的控制器中
use UploadImage;
use ADSoft\UploadImage\Exceptions\UploadImageException;
$file = $request->file('image'); $video = $rubric->name == 'Video' ? true : false; $watermark = true; $thumbnail = true; // Upload and save image. try { // Upload and save image. $input['image'] = UploadImage::upload($file, 'post', $watermark, $video, $thumbnail)->getImageName(); } catch (UploadImageException $e) { return back()->withInput()->withErrors(['image', $e->getMessage()]); }
从文件表单将您的文件上传到磁盘
/** * Upload file to disk. * * @param $file object file * @param $contentName string content name (use for create and named folder) * * @return object image * @throws UploadFileException */ UploadImage::uploadFile($file, $contentName)
例如:将以下内容添加到您的控制器中
use UploadImage;
use ADSoft\UploadImage\Exceptions\UploadImageException;
$file = $request->file('image'); // Upload and save file. try { // Upload and save file. $input['file'] = UploadImage::uploadFile($file, 'post')->getImageName(); } catch (UploadImageException $e) { return back()->withInput()->withErrors(['image', $e->getMessage()]); }
从磁盘删除您的图片
/** * Delete image from disk. * * @param $imageName string image name or array with images * @param $contentName string content name (use for folder and name) * */ UploadImage::delete($imageName, $contentName);
例如
// Delete old image. UploadImage::delete($post->image, 'post');
从正文文本中删除您的图片
/** * Delete body images from disk. * * @param $textBody string with text where there images * */ UploadImage::deleteBody($textBody);
例如
// Delete all images from post body (added in editor). UploadImage::deleteBody($post->body);
从磁盘加载您的图片
/** * Create path to image. * * @param $contentName string content name (use for folder and name) * @param null $size integer width for image (use one of thumbnail array) * * @return mixed */ UploadImage::load($contentName, $size = null);
例如
// Give all data to template. return view('posts.index', [ 'posts' => $posts, 'path' => UploadImage::load('post') ]);
以 Base64 格式获取预览图片
/** * Preview image for form. * * @param $file object instance image * @param $contentName string content name (use for folder and name) * * @return array new image stream Base64 */ UploadImage::preview($file, $contentName);
例如
// Get image preview. $image_url = UploadImage::preview($file, 'collage_image');
您可以使用以下路由
// Save image from WYSIWYG editor.
ajax/uploader/upload
// Delete image from WYSIWYG editor.
ajax/uploader/delete
// Create preview image for form (use wraper, see above).
ajax/uploader/preview
例如
// Upload files on the server and get url images. function uploadFile(filesForm) { data = new FormData(); // Add all files from form to array. for (var i = 0; i < filesForm.length; i++) { data.append("files[]", filesForm[i]); } $.ajax({ data: data, type: "POST", url: "/ajax/uploader/upload", cache: false, headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, contentType: false, processData: false, success: function (images) { // Get all images and insert to editor. for (var i = 0; i < images['url'].length; i++) { // Insert image into summernote. editor.summernote('insertImage', images['url'][i], function ($image) { //$image.css('width', $image.width() / 3); //$image.attr('data-filename', 'retriever') }); } } }); } // Delete file from the server. function deleteFile(file) { data = new FormData(); data.append("file", file); $.ajax({ data: data, type: "POST", url: "/ajax/uploader/delete", cache: false, headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, contentType: false, processData: false, success: function (image) { //console.log(image); } }); }