adsoftteam/uploadimage

将图片上传到内容类型文件夹。

2.0.21 2022-04-01 13:23 UTC

This package is auto-updated.

Last update: 2024-09-06 12:01:23 UTC


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);
        }
    });
}