如何在 Laravel 项目中轻松实现拖拽和剪切板黏贴上传图片?
许多平台或者者网站都支持使用户在评论中上传图片,为了使用户能更好的上传图片,许多都支持拖拽和剪切板粘贴上传,使用起来感觉很酷,在开发我的个人网站时也需要这样的功能,在《如何在 Laravel 项目中轻松实现上传头像功能?》中已经实现了简单的图片上传功能,接下来详情拖拽和剪切板粘贴上传图片。
评论框
在 views/articles
目录下创立 _comment_editor.blade.php
文件,在里面编写如下代码:
<code > <div class="message-body" style="color:#10a3a3;"> <i class="fa fa-info"></i> 请勿发布不友善或者负能量的内容。与人为善,比聪明更重要! </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.js
和 input.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 项目中轻松实现拖拽和剪切板黏贴上传图片?