WangEditor编辑器 复制粘贴方式上传图片

本文章向大家介绍WangEditor 提交base64格式图片上传至服务器，主要包括WangEditor 提交base64格式图片上传至服务器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1. wangEditor官网

2.引入安装

友情提示：多商户，PRO，多店版，陀螺匠的项目找到wangEditor的组件参考修改可直接使用。

// 安装
npm i wangeditor --save

// 使用
import E from "wangeditor"
this.editor = new E(this.$refs['wang-editor']);

3.使用

定义上传图片，先转base64，转blob，上传服务器

mounted() {
    this.createEditor();
},
methods: {
  createEditor() {
      let _this = this;
      const menuKey = 'alertMenuKey';
      const html = 'alertHtml';
      this.editor = new E(this.$refs['wang-editor']);

      this.editor.menus.extend(menuKey, AlertMenu);
      this.editor.menus.extend(html, HtmlMenu);
      this.editor.config.menus = this.editor.config.menus.concat(html);
      this.editor.config.menus = this.editor.config.menus.concat(menuKey);
      this.editor.config.uploadImgFromMedia = function () {
        _this.getimg();
      };
      // this.editor.config.uploadVideoHeaders = _this.header;
      this.editor.config.height = 600;
      this.editor.config.menus = [
        'alertHtml',
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        // "todo",
        'justify',
        'quote',
        'image',
        'alertMenuKey',
        // "table",
        'code',
        'splitLine',
      ];
      this.editor.config.customUploadImg = function (files, insert) {
        // 上传代码返回结果之后，将图片插入到编辑器中
        _this.filesToBase64(files);
      };
      // 配置全屏功能按钮是否展示
      //   this.editor.config.showFullScreen = false
      this.editor.config.uploadImgShowBase64 = true;
      //   this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      this.editor.config.zIndex = 0;
      //   this.editor.config.uploadImgMaxSize = this.uploadSize * 1024 * 1024
      this.editor.config.compatibleMode = () => {
        // 返回 true 表示使用兼容模式；返回 false 使用标准模式
        return true;
      };
      this.editor.config.onchange = (newHtml) => {
        this.newHtml = newHtml;
        this.$emit('editorContent', newHtml);
      };
      this.editor.config.onchangeTimeout = 300; // change后多久更新数据

      this.editor.create();
    },
    filesToBase64(files) {
      let _this = this;
      files.map((item) => {
        var reader = new FileReader();
        reader.onload = function (event) {
          var base64_str = event.target.result;
          //div中的img标签src属性赋值，可以直接展示图片
          var bytes = window.atob(base64_str.split(',')[1]);
          var array = [];
          for (let i = 0; i < bytes.length; i++) {
            array.push(bytes.charCodeAt(i));
          }
          var blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
          var formData = new FormData();
          formData.append('file', blob, Date.now() + '.jpg');
          formData.append('filename', 'file');
          fetch('http://xxx.xxx.xxx/upload/image/0/file', {
            method: 'post',
            headers: {
              'X-Token':localStorage.getItem('token'),//token的key和value值根据自己项目进行修改
            },
            body: formData,
          })
            .then((response) => response.json())
            .then((res) => {
              console.log(res.data);
              _this.editor.cmd.do('insertHTML', ``);
              //模板字符串拼接的图片路径层级也根据自己项目返回内容进行调整
            });
        };
        // 传入一个参数对象即可得到基于该参数对象的文本内容
        reader.readAsDataURL(item);
      });
    },
},