vue-quill-editor-upload : 實現vue-quill-editor上傳圖片到服務器

vue-quill-editor-upload

git： https://github.com/NextBoy/vu...

A plug-in for uploading images to your server when you use vue-quill-editor.

富文本編輯器vue-quill-editor的輔助插件，用於上傳圖片到你的服務器

說明

因爲本模塊不兼容其餘模塊，頗有侷限性，現已經開發了新的插件，而且增長了複製粘貼拖拽上傳等功能，也能兼容別人的模塊，你們要使用的話使用新模塊quill-image-extend-module，完美兼容調整大小resize-module

install

• npm

npm install vue-quill-editor-upload --save

基本使用

<template>
  <!-- bidirectional data binding（雙向數據綁定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption">
  </quill-editor>
</template>

<script>
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    components: {quillEditor, quillRedefine},
    data () {
      return {
        content: '',
        editorOption: {}  // 必須初始化爲對象 init  to Object
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 圖片上傳的設置
          uploadConfig: {
            action: '',  // 必填參數 圖片上傳地址
            // 必選參數  res是一個函數，函數接收的response爲上傳成功時服務器返回的數據
            // 你必須把返回的數據中所包含的圖片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            name: 'img'  // 圖片上傳參數名
          }
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

use

You have to install vue-quill-editor first.

請確保您已安裝了 vue-quill-editor

• import

import {quillRedefine} from 'vue-quill-editor-upload'

quillRedefine是一個函數
quillRedefine 可接收的全部參數(all params)

{
          // 圖片上傳的設置
          uploadConfig: {
            action: '',  // 必填參數 圖片上傳地址
            // 必選參數  res是一個函數，函數接收的response爲上傳成功時服務器返回的數據
            // 你必須把返回的數據中所包含的圖片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可選參數 圖片上傳方式  默認爲post
            token: sessionStorage.token,  // 可選參數 若是須要token驗證，假設你的token有存放在sessionStorage
            name: 'img',  // 可選參數 文件的參數名 默認爲img
            size: 500,  // 可選參數   圖片限制大小，單位爲Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可選參數 可上傳的圖片格式
            // start: function (){}
            start: () => { },  // 可選參數 接收一個函數 開始上傳數據時會觸發
            end: () => { },  // 可選參數 接收一個函數 上傳數據完成（成功或者失敗）時會觸發
            success: () => {},  // 可選參數 接收一個函數 上傳數據成功時會觸發
            error: () => { }  // 可選參數 接收一個函數 上傳數據中斷時會觸發
          },
          // 如下全部設置都和vue-quill-editor自己所對應
          placeholder: '',  // 可選參數 富文本框內的提示語
          theme: '',  // 可選參數 富文本編輯器的風格
          toolOptions: [],  // 可選參數  選擇工具欄的須要哪些功能  默認是所有
          handlers: {}  // 可選參數 重定義的事件，好比link等事件
}

• demo

first

you must to do: :options="editorOption" to bound Parameters

你必須綁定option :options="editorOption"

<template>
  <!-- bidirectional data binding（雙向數據綁定） -->
  <quill-editor 
                :options="editorOption">
  </quill-editor>
</template>

second

return editorOption

必須在return 中書寫editorOPtion 而且設置默認爲空對象

data () {
      return {
        content: '',
        editorOption: {}  // 必須初始化爲對象 init  to Object
      }
    }

three

init in created

在created生命週期中生成實際數據

created () {
      this.editorOption = quillRedefine(
        {
          // 圖片上傳的設置
          uploadConfig: {
            action:  '',  // 必填參數 圖片上傳地址
            // 必選參數  res是一個函數，函數接收的response爲上傳成功時服務器返回的數據
            // 你必須把返回的數據中所包含的圖片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 這裏切記要return回你的圖片地址
            }
          }
        }
      )
     // console.log(this.editorOption)
    }

注意事項 （matters need attention）

因爲不一樣的用戶的服務器返回的數據格式不盡相同

所以
在uploadConfig中，你必須以下操做

// 你必須把返回的數據中所包含的圖片地址 return 回去
 res: (respnse) => {
    return respnse.info  // 這裏切記要return回你的圖片地址
 }

好比你的服務器返回的成功數據爲

{
code: 200,
starus: true,
result: {
    img: 'http://placehold.it/100x100' // 服務器返回的數據中的圖片的地址
 }
}

那麼你應該在參數中寫爲：

// 你必須把返回的數據中所包含的圖片地址 return 回去
 res: (respnse) => {
    return respnse.result.img  // 這裏切記要return回你的圖片地址
 }

example

完整用例

<template>
  <!-- bidirectional data binding（雙向數據綁定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption">
  </quill-editor>
</template>

<script>
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    components: {quillEditor, quillRedefine},
    data () {
      return {
        content: '',
        editorOption: {}  // 必須初始化爲對象 init  to Object
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 圖片上傳的設置
          uploadConfig: {
            action: '',  // 必填參數 圖片上傳地址
            // 必選參數  res是一個函數，函數接收的response爲上傳成功時服務器返回的數據
            // 你必須把返回的數據中所包含的圖片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可選參數 圖片上傳方式  默認爲post
            token: sessionStorage.token,  // 可選參數 若是須要token驗證，假設你的token有存放在sessionStorage
            name: 'img',  // 可選參數 文件的參數名 默認爲img
            size: 500,  // 可選參數   圖片限制大小，單位爲Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可選參數 可上傳的圖片格式
            // start: function (){}
            start: () => {
            },  // 可選參數 接收一個函數 開始上傳數據時會觸發
            end: () => {
            },  // 可選參數 接收一個函數 上傳數據完成（成功或者失敗）時會觸發
            success: () => {
            },  // 可選參數 接收一個函數 上傳數據成功時會觸發
            error: () => {
            }  // 可選參數 接收一個函數 上傳數據中斷時會觸發
          },
          // 如下全部設置都和vue-quill-editor自己所對應
          placeholder: '',  // 可選參數 富文本框內的提示語
          theme: '',  // 可選參數 富文本編輯器的風格
          toolOptions: [],  // 可選參數  選擇工具欄的須要哪些功能  默認是所有
          handlers: {}  // 可選參數 重定義的事件，好比link等事件
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

原文地址：http://www.javashuo.com/article/p-esttvhkw-em.html