wangeditor上传图片到服务器，file转blob格式（vue）

Question

本篇是用vue写的组件，也可以自己写成html，复制粘贴就行。方法修改一下即可

首先，需要把上传url地址写到下面组件上，然后把参数修改一下即可使用。本文要注意的有如下几点：

1. wangeditor上传图片格式为file文件流，直接使用json格式发给接口，是为空的。
2. 需要把file文件流转成base64（filesToBase64），再转blob格式（Base64toBlob）
3. 使用customUploadImg钩子，可以自定义上传图片
4. 上传成功后，图片path插入到富文本里，需要使用editor.cmd.do

// @/components/editor.vue

<template>
  <div :ref="eleId"></div>
</template>

<script>
import Editor from "wangeditor";
import axios from "axios";
export default {
  props: {
    eleId: {
      type: String,
      default: ""
    }
  },
  created() {
    this.initEditor(this.eleId);
  },
  data() {
    return {
      editor: {},
      uploadImgForm: {
        Token: "40B8C283F7D339DFD2ABECD77C017C9C",
        file: {},
        SystemTag: "yiguan",
        Name: "touxiang.png",
        BusTag: ""
      }
    };
  },
  methods: {
    initEditor(id) {
      let self = this;
      this.$nextTick(() => {
        self.editor = new Editor(this.$refs[id]);

        // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
        self.editor.customConfig.debug =
          location.href.indexOf("wangeditor_debug_mode=1") > 0;
        // 或者 var editor = new E( document.getElementById('editor') )

        self.editor.customConfig.customUploadImg = function(files, insert) {
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法

          // 上传代码返回结果之后，将图片插入到编辑器中
          self.filesToBase64(files);
        };

        self.editor.create();
      });
    },
    filesToBase64(files) {
      let self = this
      files.map(item => {
        var reader = new FileReader();
        reader.onload = function(e) {
          self.uploadImage(e.target.result, item)
        };
        // 传入一个参数对象即可得到基于该参数对象的文本内容
        reader.readAsDataURL(item);
      });
    },
    uploadImage(base64, file) {
      let self = this
      let formdata = new FormData(); // 创建form对象
      // target.result 该属性表示目标对象的DataURL
      this.Base64toBlob({
        base64,
        success(blob) {
          // 上传完成，表单储存数组
          self.uploadImgForm.file = blob
          self.uploadImgForm.Name = file.name

          // 转formData格式发送数据
          Object.keys(self.uploadImgForm).forEach((key) => {
            formdata.append(key, self.uploadImgForm[key]);
          });

          axios.post("上传服务器地址url", formdata, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }).then(res => {
            let { data } = res
            // 插入图片到editor
            self.editor.cmd.do('insertHtml', '<img src="' + data.data.Path + '" style="max-width:100%;"/>')
          });
        }
      });
    },
    Base64toBlob({ base64, success }) {
      var arr = base64.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      let blob = new Blob([u8arr], { type: mime });
      success(blob);
    }
  }
};
</script>

<style scoped>
</style>

需要修改上传url

vue组件引用