如何在 Laravel 專案中輕鬆實現拖拽和剪下板黏貼上傳圖片?
許多平臺或者網站都支援使用者在評論中上傳圖片,為了使用者能更好的上傳圖片,許多都支援拖拽和剪下板貼上上傳,用起來感覺很酷,在開發我的 ofollow,noindex">個人網站 時也需要這樣的功能,在《 如何在 Laravel 專案中輕鬆實現上傳頭像功能? 》中已經實現了簡單的圖片上傳功能,接下來介紹拖拽和剪下板貼上上傳圖片。
評論框
在 views/articles
目錄下建立 _comment_editor.blade.php
檔案,在裡面編寫如下程式碼:
<div class="card"> <div class="card-content"> <form action="{{route('comments.store')}}" class="reply-form" method="post"> {{csrf_field()}} <input type="hidden" name="article_id" value="{{$article->id}}"> <div id="reply_notice" class="" style="color: gray;padding: 1rem;border: dashed 1px;font-size: 14px;"> <ul class="helpblock list rm-link-color add-link-underline"> <li>請注意單詞拼寫,以及中英文排版,<a href="https://github.com/sparanoid/chinese-copywriting-guidelines">參考此頁</a></li> <li>支援 Markdown 格式, <strong>**粗體**</strong>、~~刪除線~~、<code>`單行程式碼`</code>, 更多語法請見這裡 <a href="https://github.com/riku/Markdown-Syntax-CN/blob/master/syntax.md">Markdown 語法</a></li> {{-- <li>支援表情,使用方法請見 <a href="https://laravel-china.org/topics/45" target="_blank">Emoji 自動補全來咯</a>,可用的 Emoji 請見 <img title=":metal:" alt=":metal:" class="emoji" src="https://lccdn.phphub.org/assets/images/emoji/metal.png" align="absmiddle"> <img title=":point_right:" alt=":point_right:" class="emoji" src="https://lccdn.phphub.org/assets/images/emoji/point_right.png" align="absmiddle"> <a href="https://laravel-china.org/ecc/index.html" target="_blank" rel="nofollow"> Emoji 列表 </a> <img title=":star:" alt=":star:" class="emoji" src="https://lccdn.phphub.org/assets/images/emoji/star.png" align="absmiddle"> <img title=":sparkles:" alt=":sparkles:" class="emoji" src="https://lccdn.phphub.org/assets/images/emoji/sparkles.png" align="absmiddle"> </li> --}} <li>上傳圖片, 支援拖拽和剪下板黏貼上傳, 格式限制 - jpg, png, gif</li> {{--<li>釋出框支援本地儲存功能,會在內容變更時儲存,「提交」按鈕點選時清空</li>--}} </ul> </div> <div class="message is-primary " style="margin: 1rem 0;"> <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
類,這個類的程式碼在上一篇文章中已經發過了,至此拖拽和剪下板貼上上傳圖片功能已然完成,效果如下圖:

上傳成功後會顯示圖片地址