解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题_vue2上传视频太大

102 浏览量更新于2023-03-03 评论收藏 61KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

解决解决vue-quill-editor上传内容由于图片是上传内容由于图片是base64的导致字符的导致字符

太长的问题太长的问题

vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦

恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,

需要的朋友可以参考下

vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会

比较建议使用vue-quill-editor。

vue-quill-editor的使用方法在这边就不多说了，大家网上查下，一抓一大把

但是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图

片比较大的话，富文本的内容就会很大，即使图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的，这就会

给大家带来一些烦恼，我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交，那这样一来我们要怎么去处理

呢，接下来大家可以来理一理

还是老思路，既然我们可以希望不是直接将图片转成base64，那么我们可以采用选择完图片，即将图片上传服务器，服务器

返回相应的图片链接，前端将图片链接插入到富文本的指定光标上即可，这样一来就可以实现我们的想要的效果了

首先，新建富文本组件QuillEditor.vue，利用iview的上传组件来上传选择完的图片（当然，其他的上传组件也是ok的）

<Upload

id="iviewUp"

ref="upload"

:show-upload-list="false"

:on-success="handleSingleSuccess"

:format="['jpg','jpeg','png']"

:max-size="2048"

:headers="header"

:on-format-error="handleFormatError"

:before-upload="handleBeforeUpload()"

type="drag"

:action="serverUrl"

style="display: none;width:0">

</div>

</Upload>

<quill-editor

v-model="detailContent"

ref="myQuillEditor"

:options="editorOption"

@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

@change="onEditorChange($event)">

</quill-editor>

看到上面的代码有的的就会有疑问了，那上传好的图片要怎么插到富文本的指定光标里面呢，别慌，面包会有的，往下看，

handleSingleSuccess (res, file) {

// res为图片服务器返回的数据

// 获取富文本组件实例

let vm = this

let quill = this.$refs.myQuillEditor.quill

console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())

// 如果上传成功

if (res.res_code === '1') {

// 获取光标所在位置

let length = quill.getSelection().index;

// 插入图片 res.info为服务器返回的图片地址

quill.insertEmbed(length, 'image', res.result.url)

// 调整光标到最后

quill.setSelection(length + 1)

} else {

vm.$Message.error('图片插入失败')

}

// loading动画消失

this.quillUpdateImg = false

}

通过 this.$refs.myQuillEditor.quill.getSelection().index获取光标所在位置，将图片地址放在该位置即可

这样一来万事俱备，只欠东风了，这个时候大家会发现，那iview这个上传组件在页面上呢，我怎么实现点击富文本上的上传

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38720653

粉丝: 6
资源: 965

会员权益专享

解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

评论0

会员权益专享

最新资源

解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

评论0

quill-image-uploader:Quill富文本编辑器的模块，允许将图像上传到服务器，而不是进行base64编码

一个nuxt版的 vue-quill-editor demo

vue项目base64字符串转图片的实现代码

vue中怎么使用vue-quill-editor

vue-quill-editor使用总是报错vue-quill-editor.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')

vue中vue-quill-editor怎么全局引入

vue2.0使用vue-quill-editor

vue-cli导入vue-quill-editor报错Cannot read properties of undefined (reading '_c')

vue-quill-editor normal

vue-quill-editor封装

vue中vue-quill-editor对应quill什么版本

vue3 setup vue-quill-editor

vue-quill-editor富文本展示图片

vue2项目vue-quill-editor使用

用vue-quill-editor实现一个简单的效果

vue-quill-editor图片上传

vue3 使用vue-quill-editor

vue-quill-editor 生成html

vue-quill-editor 在vue的使用

vue-quill-editor 插入html

会员权益专享

最新资源