vue-quill-editor上傳圖片會轉換成base64格式，但是這不是我們想要的，之后翻了很多文章才找到想要的，下面直接上代碼
<style lang="sass">
.quill-editor
min-height: 500px
background:#fff
.ql-container
min-height: 500px
.ql-snow .ql-editor img
max-width: 480px
.ql-editor .ql-video
max-width: 480px
</style>
<template>
<div>
<!-- quill-editor插件標簽 分別綁定各個事件-->
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)">
</quill-editor>
<!-- 文件上傳input 將它隱藏-->
<el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
ref="upload" style="display:none">
<el-button size="small" type="primary" id="imgInput" element-loading-text="插入中,請稍候">點擊上傳</el-button>
</el-upload>
</div>
</template>
<script>
import Quill from 'quill'
const STATICDOMAIN = 'http://otq0t8ph7.bkt.clouddn.com/' // 圖片服務器的域名，展示時使用
const STATVIDEO = 'http://otq0t8ph7.bkt.clouddn.com/'
export default {
data () {
return {
content: '', // 文章內容
editorOption: {
placeholder: '請輸入內容',
modules: { // 配置富文本
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
]
}
},
addRange: [],
uploadData: {},
photoUrl: '', // 上傳圖片地址
uploadType: '' // 上傳的文件類型（圖片、視頻）
}
},
computed: {
// 上傳七牛的actiond地址，http 和 https 不一樣
qnLocation () {
return location.protocol === 'http:' ? 'http://upload.qiniu.com' : 'https://up.qbox.me'
}
},
methods: {
// 圖片上傳之前調取的函數
// 這個鈎子還支持 promise
beforeUpload (file) {
return this.qnUpload(file)
},
// 圖片上傳前獲得數據token數據
qnUpload (file) {
this.fullscreenLoading = true
const suffix = file.name.split('.')
const ext = suffix.splice(suffix.length - 1, 1)[0]
console.log(this.uploadType)
if (this.uploadType === 'image') { // 如果是點擊插入圖片
// TODO 圖片格式/大小限制
alert('上傳圖片')
return this.$axios('common/get_qiniu_token').then(res => {
this.uploadData = {
key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
token: res.data
}
})
} else if (this.uploadType === 'video') { // 如果是點擊插入視頻
return this.$axios('common/get_qiniu_token').then(res => {
this.uploadData = {
key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
token: res
}
})
}
},
// 圖片上傳成功回調 插入到編輯器中
upScuccess (e, file, fileList) {
console.log(e)
this.fullscreenLoading = false
let vm = this
let url = ''
if (this.uploadType === 'image') { // 獲得文件上傳后的URL地址
url = STATICDOMAIN + e.key
} else if (this.uploadType === 'video') {
url = STATVIDEO + e.key
}
if (url != null && url.length > 0) { // 將文件上傳后的URL地址插入到編輯器文本中
let value = url
// API: https://segmentfault.com/q/1010000008951906
// this.$refs.myTextEditor.quillEditor.getSelection();
// 獲取光標位置對象，里面有兩個屬性，一個是index 還有 一個length，這里要用range.index，即當前光標之前的內容長度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入圖片即可。
vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
value = value.indexOf('http') !== -1 ? value : 'http:' + value
vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 調用編輯器的 insertEmbed 方法，插入URL
} else {
this.$message.error(`${vm.uploadType}插入失敗`)
}
this.$refs['upload'].clearFiles() // 插入成功后清除input的內容
},
// 點擊圖片ICON觸發事件
imgHandler (state) {
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
let fileInput = document.getElementById('imgInput')
fileInput.click() // 加一個觸發事件
}
this.uploadType = 'image'
},
onEditorChange ({ editor, html, text }) {
console.log('editor change!', html)
this.content = html
},
// 點擊視頻ICON觸發事件
videoHandler (state) {
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
let fileInput = document.getElementById('imgInput')
fileInput.click() // 加一個觸發事件
}
this.uploadType = 'video'
}
},
created () {
this.$refs = {
myQuillEditor: HTMLInputElement,
imgInput: HTMLInputElement
}
},
// 頁面加載后執行 為編輯器的圖片圖標和視頻圖標綁定點擊事件
mounted () {
// 為圖片ICON綁定事件 getModule 為編輯器的內部屬性
console.log(this.$refs.myQuillEditor.quill)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 為視頻ICON綁定事件
}
}
</script>
參考文章：
https://github.com/surmon-china/vue-quill-editor/issues/102