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

作者 : 开心源码 本文共2514个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共159人阅读

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

评论框

views/articles 目录下创立 _comment_editor.blade.php 文件,在里面编写如下代码:

<code >                <div class="message-body" style="color:#10a3a3;">                    <i class="fa fa-info"></i> &nbsp;&nbsp;请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!                </div>            </div>            <div class="field" >                <p class="control">                    <textarea id="content" class="textarea" placeholder="输入内容,支持markdown" name="content"></textarea>                </p>            </div>            <div class="field">                <p class="control">                    <button class="button is-link" type="submit"><span class="icon"><i class="fa fa-send"></i></span><span>提交</span></button>                </p>            </div>        </form>    </div></div>

效果如下:

评论框截图

拖拽和剪切板上传图片

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

图片来源于 Inline-Attachment

用起来很方便,我们只要引入 inline-attachment.jsinput.inline-attachment.js 两个文件即可以,从 Github 上下载下来,并拷贝到 public/js 目录下,而后引入到 _comment_editor.blade.php 中,引入代码如下:

<script src="{{asset('js/inline-attachment.js')}}"></script><script src="{{asset('js/input.inline-attachment.js')}}"></script>

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

<script>    inlineAttachment.editors.input.attachToInput(document.getElementById("content"), {        uploadUrl:'{{route('upload.images')}}',        extraParams: {            '_token': '{{csrf_token()}}',        },        onFileUploadResponse: function(xhr) {            var result = JSON.parse(xhr.responseText),                filename = result[this.settings.jsonFieldName];            if (result && filename) {                var newValue;                if (typeof this.settings.urlText === 'function') {                    newValue = this.settings.urlText.call(this, filename, result);                } else {                    newValue = this.settings.urlText.replace(this.filenameTag, filename);                }                var text = this.editor.getValue().replace(this.lastValue, newValue);                this.editor.setValue(text);                this.settings.onFileUploaded.call(this, filename);            }            return false;        }    });</script>

从代码中我们可以看到,我们先将其绑定到我们的 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,全栈开发工程师和终身学习者。
不喜勿喷,以人为善,比聪明更重要。
欢迎留言和关注,且接受任何宝贵的建议。
理解更多

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 如何在 Laravel 项目中轻松实现拖拽和剪切板黏贴上传图片?

发表回复