vue問題四：富文本編輯器上傳圖片

vue使用富文本編輯器上傳圖片：

我是用的是wangEditor 富文本編輯器 demo:http://www.wangeditor.com/

1).安裝依賴:npm install wangeditor

2).我自己是創建了一個組件這樣再用到的時候可以直接調用（可能有更簡單的方法）

<template lang="html"><div class="editor"><div ref="toolbar" class="toolbar"></div><div ref="editor" class="text"></div></div>
</template><script>import E from 'wangeditor'let editor=nullexport default {name: 'Editorbar',data () {return {info_: null}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},watch: {isClear (val) {// 觸發清除文本域內容if (val) {editor.txt.clear()this.info_ = null}},value (val) {// 使用 v-model 時,設置初始值
        editor.txt.html(val)}},mounted () {this.seteditor()},methods: {seteditor () {editor = new E(this.$refs.toolbar, this.$refs.editor)editor.customConfig.uploadImgShowBase64 = true // base 64 存儲圖片
        editor.customConfig.uploadImgServer = 'http://47.106.198.122/api/CanteenAdmin/CanteenManagement/UploadImage'// 配置服務器端地址
        editor.customConfig.uploadImgHeaders = {  'token':sessionStorage.getItem('token')    }// 自定義 header
        editor.customConfig.uploadFileName = 'image' // 后端接受上傳文件的參數名
        editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 將圖片大小限制為 2M
        editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上傳 3 張圖片
        editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 設置超時時間// this.editor.customConfig.uploadParams = {formFile:'2'};// 配置菜單
        editor.customConfig.menus = ['bold', // 粗體'underline', // 下劃線'link', // 插入鏈接'quote', // 引用'emoticon', // 表情'image', // 插入圖片'table', // 表格'code', // 插入代碼
]editor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入圖片失敗回調
          },success: (xhr, editor, result) => {// 圖片上傳成功回調//
            // let imgUrl = result.data;// insertImg(imgUrl)
          },timeout: (xhr, editor) => {// 網絡超時的回調
          },error: (xhr, editor) => {console.log(editor)// 圖片上傳錯誤的回調
          },customInsert: (insertImg, result, editor) => {// 圖片上傳成功,插入圖片的回調
            console.log(result);// if(result.code == 200){var url = result.data;insertImg(url)//將內容插入到富文本中// console.log(insertImg(url)+"DFDF")// console.log(data+"dsfd")// }
          }};editor.customConfig.onchange = (html) => {this.info_ = html // 綁定當前逐漸地值this.$emit('change', this.info_) // 將內容同步到父組件中
          console.log(this.info_ )};// 創建富文本編輯器
        editor.create()}}}
</script><style lang="css">.editor {width: 80%;margin-left: 4%;}.toolbar {border: 1px solid #ccc;}.w-e-menu{z-index:1 !important;}.text {width:100%;border: 1px solid #ccc;height: 300px;}
</style>

<!--富文本編輯器--><div style="margin-top:2%;margin-left: 1%"><editor-bar v-model="zldata.info" :isClear="isClear"></editor-bar></div>js:
<script>
import EditorBar from './editor'export default {data: function () {return {isClear: false,zldata: {info:'',},}},components: {EditorBar},}</script>

?

喜歡的給個贊吧！！！