Vue+element UI +vue-quill-editor Rich Text picture upload to ride Qiniu

Vue-quill-editor upload image will be converted to Base64 format, but this is not what we want, and then turned a lot of articles to find the desired, the following directly on the code

<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 Plug-in tags bind each event individually--
<quill-editor v-model= "Content" ref= "myquilleditor": options= "editoroption" @change = "Oneditorchange ($event)" >
</quill-editor>
<!--file Upload input to hide it-
<el-upload class= "Upload-demo": action= "qnlocation": before-upload= ' beforeupload ':d ata= "uploadData": on-success = ' upscuccess '
ref= "Upload" style= "Display:none" >
<el-button size= "small" type= "primary" id= "Imginput" element-loading-text= "INSERT, please wait" > click Upload </el-button>
</el-upload>
</div>

</template>

<script>
Import Quill from ' Quill '
Const Staticdomain = ' http://otq0t8ph7.bkt.clouddn.com/'//image server domain name, display when used
Const STATVIDEO = ' http://otq0t8ph7.bkt.clouddn.com/'

Export Default {
Data () {
return {
Content: ",//articles
Editoroption: {
PLACEHOLDER: ' Please enter content ',
Modules: {//Configure Rich Text
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: ",//Upload image Address
Uploadtype: "//uploaded file type (image, video)
}
},
Computed: {
Upload seven Cattle actiond address, HTTP and HTTPS are not the same
Qnlocation () {
return Location.protocol = = = ' http: '? ' http://upload.qiniu.com ': ' https://up.qbox.me '
}
},
Methods: {
Functions that were taken before the image was uploaded
This hook also supports promise
Beforeupload (file) {
return This.qnupload (file)
},
Get data token data before uploading images
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 ') {//If it is clicked Insert Picture
TODO picture format/size limit
Alert (' Upload image ')
return this. The $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 ') {//If you are clicking Insert Video
return this. The $axios (' Common/get_qiniu_token '). Then (res = {
This.uploaddata = {
Key: ' Video/${suffix.join ('. ')} _${new Date (). GetTime ()}.${ext} ',
Token:res
}
})
}
},

Image upload successful callback inserted into the editor
Upscuccess (E, file, fileList) {
Console.log (e)
This.fullscreenloading = False
Let VMS = this
Let url = ' '
if (This.uploadtype = = = ' image ') {//Get the URL address after file upload
url = staticdomain + e.key
} else if (this.uploadtype = = = ' Video ') {
url = statvideo + e.key
}
if (URL! = null && url.length > 0) {//upload the file URL into the editor text
Let value = URL
api:https://segmentfault.com/q/1010000008951906
this. $refs. MyTextEditor.quillEditor.getSelection ();
Gets the cursor position object, which has two properties, one is index and a length, here to use Range.index, that is, the content length before the current cursor, and then use insertembed (length, ' image ', IMAGEURL), You can insert a picture.
Vm.addrange = vm. $refs. MyQuillEditor.quill.getSelection ()
Value = Value.indexof (' http ')!==-1? Value: ' http: ' + value
VMs. $refs. myQuillEditor.quill.insertEmbed (vm.addrange!== null? vm.addrange.index:0, Vm.uploadtype, value, Quill.sources.USER)//Call the Insertembed method of the editor, insert the URL
} else {
this. $message. Error (' ${vm.uploadtype} Insert failed ')
}
this. $refs [' Upload '].clearfiles ()//erase the contents of input after successful insertion
},

Click on the image icon to trigger the event
Imghandler (state) {
This.addrange = this. $refs. MyQuillEditor.quill.getSelection ()
if (state) {
Let FileInput = document.getElementById (' imginput ')
Fileinput.click ()//plus a trigger event
}
This.uploadtype = ' image '
},
Oneditorchange ({editor, HTML, text}) {
Console.log (' editor change! ', HTML)
This.content = html
},
Click on the video icon to trigger the event
Videohandler (state) {
This.addrange = this. $refs. MyQuillEditor.quill.getSelection ()
if (state) {
Let FileInput = document.getElementById (' imginput ')
Fileinput.click ()//plus a trigger event
}
This.uploadtype = ' video '
}
},
Created () {
this. $refs = {
Myquilleditor:htmlinputelement,
Imginput:htmlinputelement
}
},
After the page loads, executes the image icon for the editor and the video icon to bind the point-and-click event
Mounted () {
Bind event GetModule for picture icon to internal property of editor
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)//Bind event for video icon
}
}
</script>

Reference article:

https://github.com/surmon-china/vue-quill-editor/issues/102

Vue+element UI +vue-quill-editor Rich Text picture upload to ride Qiniu