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
vue+element ui +vue-quill-editor 富文本图片上传到骑牛云
原文地址：http://www.cnblogs.com/yr-rr/p/7991776.html