[JavaScript知识库]Vue2Editor富文本实现图片上传

上传图片要添加两个属性，
useCustomImageHandler
@image-added=“handleImageAdded”

 <template>
            <div id="app">
              <VueEditor
                useCustomImageHandler
                @image-added="handleImageAdded"
                v-model="form.content"
              ></VueEditor>
            </div>
          </template>

在 data中声明两个变量方便在调用接口转化图片地址时使用

export default {
	data() {
		return {
			  editorImg: null,
     		  editorUrl: null,
		}
	]
}

当选择图片之后，调用方法，传递接口，返回图片地址

 methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
    //upload是我封装的方法
      upload("/api/EToolFile", file).then((res) => {
        if (res.status === 200) {
          this.editorImg = res.data.data.name;
          this.editorUrl =
            process.env.VUE_APP_BASE_API +
            "/api/EToolFile/download/picname/" +
            this.editorImg;
            //在鼠标位置插入图片，保存的URL地址是this.editorUrl
          Editor.insertEmbed(cursorLocation, "image", this.editorUrl);
          resetUploader();
        }
      });
    },
   }