如何在 Laravel 项目中轻松实现拖拽和剪切板黏贴上传图片？

许多平台或者网站都支持用户在评论中上传图片，为了用户能更好的上传图片，许多都支持拖拽和剪切板粘贴上传，用起来感觉很酷，在开发我的个人网站时也需要这样的功能，在《如何在 Laravel 项目中轻松实现上传头像功能?》中已经实现了简单的图片上传功能，接下来介绍拖拽和剪切板粘贴上传图片。

评论框

在 views/articles 目录下创建 _comment_editor.blade.php 文件，在里面编写如下代码：

    

        

            {{csrf_field()}}
            
            

                

                    
请注意单词拼写，以及中英文排版，参考此页
                    
支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
                   {{-- 
支持表情，使用方法请见 Emoji 自动补全来咯，可用的 Emoji 请见    Emoji 列表    
                   --}} 
上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
                    {{--
发布框支持本地存储功能，会在内容变更时保存，「提交」按钮点击时清空
--}}
                
            
            

                

                       请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
                
            
            

                

                    
                
            
            

                

                    提交
                
            
        
    

效果如下：

评论框截图

拖拽和剪切板上传图片

我们使用开源的插件-Inline Attachment，它可以让我们很轻松的实现拖拽和剪切板粘贴上传图片，看看它动图效果：

图片来源于 Inline-Attachment

使用起来很方便，我们只需引入 inline-attachment.js 和 input.inline-attachment.js 两个文件就可以，从 Github 上下载下来，并拷贝到 public/js 目录下，然后引入到 _comment_editor.blade.php 中，引入代码如下：

接下来在 _comment_editor.blade.php 文件中配置 Inline Attachment ，编写代码如下：

从代码中我们可以看到，我们先将其绑定到我们的 textarea 上，并且我们设置了 uploadUrl 项指定了图片上传路由名为
uploads.images 。所以接下来我们在 routes/web.php 中添加路由，代码如下：

Route::post('/upload_images','ArticlesController@uploadImage')->name('upload.images');

在 app/Http/Controllers/ArticlesController.php 中添加 uploadImage 方法用以上传图片并返回图片地址，代码如下：

public function uploadImage(Request $request,ImageUploadHandler $imageUploadHandler)
{
    if ($file = $request->file('file')) {
        try {
            $result = $imageUploadHandler->save($file, 'articles', 1);

        } catch (\Exception $exception) {
            return ['error' => $exception->getMessage()];
        }
        $data['filename'] = $result['path'];
    } else {
        $data['error'] = 'Error while uploading file';
    }
    return $data;
}

细心的你可能已经发现，我们引用了一个 ImageUploadHandler 类，这个类的代码在上一篇文章中已经发过了，至此拖拽和剪切板粘贴上传图片功能已然完成，效果如下图:

上传成功后会显示图片地址

感谢阅读，我是sevdot，全栈开发工程师和终身学习者。
不喜勿喷，以人为善，比聪明更重要。
欢迎留言和关注，且接受任何宝贵的建议。
了解更多