如何在 Laravel 專案中輕鬆實現拖拽和剪下板黏貼上傳圖片？

sevdot發表於2018-09-11
Laravel

許多平臺或者網站都支援使用者在評論中上傳圖片，為了使用者能更好的上傳圖片，許多都支援拖拽和剪下板貼上上傳，用起來感覺很酷，在開發我的個人網站時也需要這樣的功能，在《如何在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://learnku.com/laravel/t/45" target="_blank">Emoji 自動補全來咯</a>，可用的 Emoji 請見 <img title=":metal:" alt=":metal:" class="emoji" src="https://cdn.learnku.com/assets/images/emoji/metal.png" align="absmiddle"> <img title=":point_right:" alt=":point_right:" class="emoji" src="https://cdn.learnku.com/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://cdn.learnku.com/assets/images/emoji/star.png" align="absmiddle"> <img title=":sparkles:" alt=":sparkles:" class="emoji" src="https://cdn.learnku.com/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> &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>

效果如下：

image.png | left | 827x324

拖拽和剪下板上傳圖片

我們使用開源的外掛-Inline Attachment，它可以讓我們很輕鬆的實現拖拽和剪下板貼上上傳圖片，看看它動圖效果：

d.gif | left | 546x338

使用起來很方便，我們只需引入 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 類，這個類的程式碼在上一篇文章中已經發過了，至此拖拽和剪下板貼上上傳圖片功能已然完成，效果如下圖:

image.png | left | 827x327

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章