kirill-dan/uploadimage

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

v2.0.2 2018-09-06 17:17 UTC

This package is not auto-updated.

Last update: 2023-12-02 14:46:20 UTC


README

适用于 Laravel 5.3 / 5.4 / 5.5

此包为您提供了以下机会

  • 轻松上传图像文件到内容类型文件夹
  • 为您的图像创建缩略图
  • 您可以轻松地从磁盘加载任何内容类型的图像(原始图像或缩略图图像)
  • 您可以轻松地从磁盘删除您的图像
  • 您可以轻松地从包含相对链接的图像的正文文本中删除所有图像
  • 您可以轻松创建预览图像,而不需要在磁盘上存储图像
  • 您可以使用 AJAX 在 WYSIWYG 编辑器中轻松上传/删除图像
  • 您可以轻松地在图像上添加水印
  • 您可以将图像存储在磁盘上或在数据库中以 Base64 格式存储

历史

  • v2.0.1 - 在方法中分配缩略图:upload($file, $contentName, $watermark = false, $video = false, $thumbnails = false)
  • v2.0 - 支持 Laravel 5.5
  • v1.0.70 - 添加到配置 'watermarkEditorStatus' 以用于 WYSIWYG 编辑器。更改 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 kirill-dan/uploadimage 2.*

将以下条目添加到文件 config/app.php

提供者部分

'providers' => [
    .......
    Spatie\Glide\GlideServiceProvider::class,
    Dan\UploadImage\UploadImageServiceProvider::class,
]

外观部分

'aliases' => [
    .......
    'GlideImage' => Spatie\Glide\GlideImageFacade::class,
    'UploadImage' => Dan\UploadImage\UploadImageFacade::class,
]

在终端中输入以下命令

php artisan vendor:publish --provider="Dan\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 Dan\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()]);
}

从磁盘删除您的图像

/**
 * 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');

您可以使用next路由

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