WangEditor增加附件上传功能

74 阅读 0 评论 49 点赞

我是靠谱客的博主成就超短裙，最近开发中收集的这篇文章主要介绍WangEditor增加附件上传功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

WangEditor增加附件上传功能

WangEditor富文本官方地址

// 上传附件功能
// 第一，菜单 class ，Button 菜单继承 BtnMenu class
      class FileMenu extends BtnMenu {
          constructor(editor) {
            // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
              const $elem = E.$(
              // 这里使用opacity: 0将上传文件不显示，代替使用img显示，但input仍在img上方，在点击图标时，会弹出文件选择页面
                  `<div class="w-e-menu" data-title="上传文件">
                      <div style="width: 16px;height: 16px;display: flex;"><img src="./static/img/file.png"/>
                      <input type="file" style="opacity: 0;width: 16px;height: 16px;position: absolute;" multiple="multiple"  onchange="handleFileChange(this)"/></div>
                  </div>`
              )
              super($elem, editor)
          }
          // 菜单点击事件
          clickHandler() {
              // 做任何你想做的事情
              // 可参考【常用 API】文档，来操作编辑器
          }
          // 菜单是否被激活（如果不需要，这个函数可以空着）
          // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
          // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
          tryChangeActive() {
              // 激活菜单
              // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
              // 2. this.this.isActive === true
              this.active()

              // // 取消激活菜单
              // // 1. 菜单 DOM 节点会删掉 .w-e-active
              // // 2. this.this.isActive === false
              // this.unActive()
          }
      }

      // 菜单 key ，各个菜单不能重复
    const menuKey = 'fileMenuKey' 

    // 注册菜单
    E.registerMenu(menuKey, FileMenu)



      this.editor = new E('#editor');

以上代码需在new E之前完成

//在vue中，需要将input onchange方法注册在window上，避免出现not defined错误
window.handleFileChange = this.handleFileChange;

上传逻辑

handleFileChange(e){
        let agentInfo = JSON.parse(localStorage.getItem("agentInfo"));
        let formData = new FormData();
        for (let i = 0; i < e.files.length; i++) {
          // formData.append(file.name,file);
          let file = e.files[i];
          formData.append('files['+i+']', file, file.name);
        }
        formData.append("type","1");
        formData.append("companyNo",agentInfo.companyCode);

        let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }

        let that = this;
        this.$http.post("/common/editorUpload.json",formData,config).then(function (res) {  //消息查询
            let result= res.data.errno;
            if(result != "0"){
              that.$Message.error('文件上传失败');
              return false;
            }
            res.data.data.forEach(item => {
            //将返回的数据 append在富文本后面
              that.editor.txt.append('<a target="_blank" style="color:blue" download href=''+item.url+''>'+item.name+'</a><br>');
            })
            
        })
      }