vue+WangEditor编辑器配置上传图片

53 阅读 0 评论 35 点赞

我是靠谱客的博主直率战斗机，最近开发中收集的这篇文章主要介绍vue+WangEditor编辑器配置上传图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

记录.

起因这段在维护老项目过程中，客户反馈说前台页面查看项目动态时加载太慢需要 2-3秒才能加载出页面。后来我去排查是发现之前富文本编辑器上传图片时把图片转base64发送给了后端…结果你懂.

这种情况一张图片还好图片多了就导致信息量太大，5mb大小文件存到数据库里…这查询能不慢么

下面代码

    this.editor = new E(this.$refs.editorElem);
   
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      'image', // 插入图片
      "table", // 表格
      "undo", // 撤销
      "redo", // 重复
    ];


    this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config
    // this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
    // 配置上传图片功能
    this.editor.customConfig.uploadImgServer = http.baseURL + 'you/upload' //填写后台服务器地址
    this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 限制上传图片的大小为3MB
    this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片
    this.editor.customConfig.uploadImgTimeout = 4 * 60 * 1000 // 设置超时时间
    this.editor.customConfig.uploadImgParams = {
      file_type: 'img'
    }
    this.editor.customConfig.uploadImgHeaders = {
      Authorization: getToken // 如果需要添加请求头，可以在这里配置
    }
    this.editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        if (result.code === 0) {
          insertImg(result.data.requestUrl) // 插入图片到编辑器中
        } else {
          console.error('上传图片失败')
        }
      }
    }
    this.editor.customConfig.zIndex = 100;
    this.editor.customConfig.pasteFilterStyle = false;
    this.editor.create(); // 创建富文本实例

后端Java部分

@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
  try {
    // 保存文件到本地或者云存储等操作
    // ...
    String url = "http://yourdomain.com/images/" + fileName; // 获取上传后的图片地址
    return Result.success(url);
  } catch (IOException e) {
    e.printStackTrace();
    return Result.fail("上传失败");
  }
}

感谢chatgpt提供思路帮助~