wangeditor3.0上传本地图片和本地视频至服务器

1.效果

2.注意:我下载的3.0版本
3.组件(在components文件里创建一个wangEditoe.vue文件)

<template lang="html">

  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text" :style="{minHeight:h,width:w}">
    </div>
    
  </div>
</template>

<script>
import E from "wangeditor";
import { imgUrl } from "@/api/allApi.js";
import { getToken } from "@/utils/auth";

export default {
  name: "editor",
  props: {
    w: {
      type: String,
      default:'100%'
    },
    h: {
      type: String,
      default:'600px'
    },
    value: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      getToken: getToken(),
      action: imgUrl + "接口地址",
      // uploadPath,
      editor: null,
      info_: null,
      menus: [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "code", // 插入代码
        "video",
        "undo", // 撤销
        "redo", // 重复
        "fullscreen", // 全屏
      ],
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  computed: {},
  mounted() {
    this.seteditor();
    this.editor.txt.html(this.value);
  },
  methods: {
    handleRemove(file, fileList) {
      this.emitInput(fileList);
    },
    seteditor() {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
      this.editor.customConfig = this.editor.customConfig
        ? this.editor.customConfig
        : this.editor.config;
      this.editor.customConfig.menus = this.menus;
      // 上传图片
      this.editor.customConfig.uploadImgShowBase64 = false; //如果为true，则不用配置下面的
      // 配置服务器端地址 upload:上传图片地址
      this.editor.customConfig.uploadImgServer = this.action; // 这是服务器端上传图片的接口路径
      this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
      this.editor.customConfig.uploadImgHeaders = {
        Authorization: this.getToken,
      }; // 设置请求头
      console.log("请求", this.editor.customConfig);
      //可使用监听函数在上传图片的不同阶段做相应处理
      this.editor.customConfig.uploadImgHooks = {
        //服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错
        customInsert: function (insertImg, result, editor) {
          if (result.code == 200) {
            const link = result.data;
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            insertImg(link); // result 必须是一个 JSON 格式字符串！！！否则报错
          } else {
            this.$message({
              message: result.message,
              type: "warning",
            });
          }
        },
      };
      //上传视频
      // 配置服务器端地址 upload:上传图片地址
      this.editor.customConfig.uploadVideoServer = this.action;//请求地址
      this.editor.customConfig.uploadVideoHeaders = {
        Authorization: this.getToken,
      }; // 自定义 header
      this.editor.customConfig.uploadVideoName = "file";
      //可使用监听函数在上传图片的不同阶段做相应处理
      this.editor.customConfig.uploadVideoHooks = {
        customInsert: function (insertVideo, result, editor) {
          var url = result.data; //获取后台返回的url
          console.log("视频", insertVideo, result, editor);
          if (result.code == 200) {
            const link = result.data;
            insertVideo(link);
          } else {
            this.$message({
              message: result.message,
              type: "warning",
            });
          }
        },
      };
      // 配置菜单
      //连接
      (this.editor.customConfig.linkCheck = function (text, link) {
        console.log("插入的文字", text); // 插入的文字
        console.log("插入的链接", link); // 插入的链接
        return true; // 返回 true 表示校验成功
        // return '验证失败' // 返回字符串，即校验失败的提示信息
      }),
        (this.editor.customConfig.onchange = (html) => {
          this.info_ = html; // 绑定当前逐渐地值
          this.$emit("change", this.info_); // 将内容同步到父组件中
        });
      // 创建富文本编辑器
      this.editor.create();
    },
  },
};
</script>

<style lang="css">
.videoWarp {
  display: flex;
  justify-content: flex-end;
}
.warp {
  display: inline-block;
  position: relative;
  top: 42px;
  /* left: 98px; */
  z-index: 100000;
  width: 67px;
  height: 36px;
  border: 1px border #dee5ed;
  /*  background-color: #409EFF; */
  /* color: white; */
  font-weight: bold;
  border-radius: 10px 10px;
}

.editor {
  width: 90%;
  /* margin: 0 auto; */
  position: relative;
  z-index: 0;
}

.toolbar {
  border: 1px solid #ccc;
}

.text {
  border: 1px solid #ccc;
  min-height: 500px;
}
</style>

3.引入

<template>
<div>
 <editor-bar v-model="description" :isClear="isClear" @change="changeImg"></editor-bar>
</div>
</template>
<script>
import EditorBar from '@/components/wangEditor.vue'//wangEditro
export default {
     components:{EditorBar },
      data(){
            return{
            isClear:false,
            }
          },
          methods:{
          changeImg(e){
                console.log('上传',e);
                   }
          }
}
</script>
<style lang='css'>
.editor {
  width: 90%;
  /* margin: 0 auto; */
  position: relative;
  z-index: 0;
}

.toolbar {
  border: 1px solid #ccc;
}

.text {
  border: 1px solid #ccc;
  min-height: 500px;
}
</style>