wangeditor上传图片 vue2代码

在Vue2中使用WangEditor上传图片的代码如下：

1. 引入WangEditor

在Vue组件中引入WangEditor：

import WangEditor from 'wangeditor';

2. 初始化WangEditor

在Vue组件中挂载WangEditor：

mounted() {
  const editor = new WangEditor('#editor');
  editor.create();
}

3. 配置图片上传

在WangEditor中配置图片上传：

mounted() {
  const editor = new WangEditor('#editor');
  editor.config.uploadImgServer = '/api/upload'; // 上传图片的接口地址
  editor.config.uploadImgHeaders = { Authorization: 'Bearer ' + token }; // 上传图片时需要携带的请求头
  editor.config.uploadImgHooks = {
    before(xhr, editor, files) {
      // 上传图片之前的回调函数，可以在此处添加loading动画等
    },
    success(xhr, editor, result) {
      // 上传图片成功的回调函数，result为服务器返回的结果
    },
    fail(xhr, editor, result) {
      // 上传图片失败的回调函数，result为服务器返回的结果
    },
    error(xhr, editor) {
      // 上传图片出错的回调函数
    },
    timeout(xhr, editor) {
      // 上传图片超时的回调函数
    },
    customInsert(insertImgFn, result, editor) {
      // 自定义插入图片的函数，result为服务器返回的结果
      const url = result.data.url;
      insertImgFn(url);
    }
  };
  editor.create();
}

其中，`uploadImgServer`为上传图片的接口地址，`uploadImgHeaders`为上传图片时需要携带的请求头，`uploadImgHooks`为上传图片的回调函数。可以根据需要自定义回调函数。最后，调用`editor.create()`方法将WangEditor挂载到DOM节点上。