vue使用wangedit自定义上传图片按钮_waneditor on focus-优快云博客

本文链接：https://blog.youkuaiyun.com/cbb_2313/article/details/109604368

本文介绍了如何在Vue项目中使用wangEditor富文本编辑器自定义上传图片功能，以避免图片编码导致的数据库长度限制问题。通过添加上传图片按钮，实现选择图片后上传到云端，获取图片链接并插入到富文本内容中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wangedit的上传图片，一个是填写图片地址，一个是本地上传，本地上传是把图片的base64编码放在了图片src中，接口参数长度在数据库都有限制的，如果图片地址用base64编码的话，随便上传几张照片长度就会超出数据库限制，不是报错就是截取字符，但是我们可以自己写上传图片的按钮，上传阿里云，腾讯云，服务器都可以，拿到连接放在富文本中

思路：

在富文本操作栏上放一个图片按钮
点击按钮可以选择图片
选择图片成功，做上传操作
上传图片成功，拿到图片地址，拼接到img标签中
追加到富文本内容里面

代码展示（封装的富文本组件）：

<!--
  富文本公共组件
  getContent: 父组件传过来的参数，是富文本的内容
  getEditorCon：传给父组件的值，是富文本输入的内容
-->
<template>
  <div id="editor-box">
	<!-- form - 自定义上传图片的按钮 -->
    <form action="" id="uploadForm">
      <i class="el-icon-picture uploadimg"></i>
      <input
        type="file"
        title=""
        name="uploads"
        id="uploads"
        accept="image/png, image/jpeg, image/jpg"
        multiple
        ref="dowloadImg"
        @change="uploadimg($event)"
      />
    </form>
    <div ref="editor" style="text-align:left"></div>
  </div>
</template>

<script>
import E from "wangeditor";
let OSS<