配合 element-ui 实现上传图片/视频到七牛的方法
按照上面博客里的教程，亲测可以成功。
这个博客作者并不是我，非常感谢这个作者。
然后下面附上我自己根据这个博客实现的代码，添加了不少注释，去掉了统计字数逻辑。
<style lang="sass">
.quill-editor
min-height: 500px
.ql-container
min-height: 500px
.ql-snow .ql-editor img
max-width: 480px
.ql-editor .ql-video
max-width: 480px
</style>
<template lang="pug">
.the_my_editor_container
quill-editor(
v-model="content"
ref="myQuillEditor"
:options="editorOption"
)
//- 文件上传input 将它隐藏
el-upload.upload-demo(
:action="qnLocation"
:before-upload='beforeUpload'
:data="uploadData"
:on-success='upScuccess'
ref="upload"
style="display:none"
)
el-button#imgInput(
size="small"
type="primary"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-text="插入中,请稍候"
) 点击上传
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import Quill from 'quill'
const STATICDOMAIN = 'http://otq0t8ph7.bkt.clouddn.com/' // 图片服务器的域名，展示时使用
const STATVIDEO = 'http://otq0t8ph7.bkt.clouddn.com/'
@Component
export default class Editor extends Vue {
content = '' // 文章内容
editorOption = {
placeholder: '请输入内容',
}
addRange = []
uploadData = {}
photoUrl = '' // 上传图片地址
uploadType = '' // 上传的文件类型（图片、视频）
fullscreenLoading = false
$refs = {
myQuillEditor: HTMLInputElement,
imgInput: HTMLInputElement
}
// 上传七牛的actiond地址，http 和 https �不一样
get qnLocation() {
return location.protocol === 'http:' ? 'http://upload.qiniu.com' : 'https://up.qbox.me'
}
// 图片上传之前调取的函数
// 这个钩子还支持 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 图片格式/大小限制
return this.$http('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.$http('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'
}
// 点击视频ICON触发事件
videoHandler(state) {
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
let fileInput = document.getElementById('imgInput')
fileInput.click() // 加一个触发事件
}
this.uploadType = 'video'
}
// 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
mounted() {
// 为图片ICON绑定事件 getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
}
}
</script>
Zhengbledore, imshadow, xiaojiangjiang, ycqiang, wangteng730 and 8 more
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4