微信小程序之rich-text组件使用

项目上有个需求,后台可以使用富文本编辑器编辑文章上传,之后在小程序上展示出来,微信小程序刚好有这么一个组件,rich-text组件,它的功能就是展示富文本,他有个nodes属性,它的值可以是字符串或者是数组,内容就是html,实际使用时发现有些图片无法解析,上网查询,有说就是图片太大的,有说根本不能解析图片的,或者不能使用img标签,又或者不能解析本地地址,总之不能显示图片,然后就想到了这个办法.

//项目后台使用的富文本编辑器是Quill,大家如果想用可以百度一下,在选择图片之后可以有个回调, 如下
editorOption: {
        modules: {
          toolbar: {
            //工具栏
            container: toolbarOptions,
            // 点击上传图片
            handlers: {
              image: function (value) {
                if (value) {
                //这里是一个收集文件的点击事件
                  document.getElementById("quillInput").click();
                } else {
                  return;
                }
              },
            },
          },
          //复制粘贴清楚格式
          clipboard: {
            // 粘贴板，处理粘贴时候的自带样式
            // matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
          },
        },
        placeholder: "输入内容...",
      }, //编辑器配置项
      
      //点击之后触发
quillChange(e) {
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("articleImage", file);
      formData.append("articleName", this.articleName);
      //将图片和当前文章名称传给后端,让他存到服务器,返回一个服务器地址,然后手动往html里添         加一个img标签,这样就可以了
      uploadImg(formData).then((res) => {
        this.html =
          this.html +
          `<p><img style='width:100%;height:auto' src='${res.results.imageUrl}' /></p>`;
        e.target.value = "";
      });
    },