vue quill富文本编辑器上传图片遇到的坑

在使用quill富文本编辑器上传图片的时候，很多地方都是成功的，但是唯有一处，上传图片总是失败，由此后端的朋友就说可以html标签转换成JSON字符串上传上去，展示的时候在转换回来，即可解决问题。

由此，我保持怀疑的心态开始了尝试：

首先就是引入html2json依赖

npm install html2json

然后就是将富文本编辑器里输入的内容，也就是导出的html标签转换成JSON：

 var html2json = require('html2json').html2json;
 this.addFrom.content =  JSON.stringify(html2json(this.addFrom.content))
//直接复制即可

其转换结果如下：

this.addFrom.content：{
    "node":"root",
    "child":[
        {
            "node":"element",
            "tag":"p","
             child":[
                {
                    "node":"text",
                    "text":"全"
                },{
                    "node":"element",
                    "tag":"img",
                    "attr":{
                        "src":"https://test.files.gongxiangsc.com/2023/02/13/da1472d9-db19-4b7d-9f40-305572f1f658.jpg"
                    }
                },{
                    "node":"text",
                    "text":"你还只想着坚实的机会 "
                }
            ]
        }
    ]
}

再次转换成JSON字符串看个人选择，有的会有后台要求。

当然要是不喜欢这种系统自带的格式的话，也可以自己自定义一些格式，只要能够在逆转回来。比如说是以下的格式：

//对插件生成的数据进行处理，处理成自己想要的格式  "[{"state":"textasdasd"},{"state":"imaghttps://xxxx.jpeg"}]"
 release(types, bol = true) {
      let json = html2json(this.detailContent);
      let arr = [];
      for (let i of json.child) {
        for (let j of i.child) {
          if (j.node == "text") {
            let obj = {};
            let tex = "text" + j.text;
            obj.state = tex;
            arr.push(obj);
          } else if (j.tag == "img") {
            let obj = {};
            let tex = "imag" + j.attr.src;
            obj.state = tex;
            arr.push(obj);
          }
        }
      }

作者：凡人已非凡
链接：https://juejin.cn/post/6844903864659886087
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

而在将其回显的时候，则需要将其从JSON中再次转换出来，

var json2html = require('html2json').json2html;
 this.echo = json2html(JSON.parse(this.addFrom.content))
//直接复制即可

其结果如下：

<p>全<img src="https://test.files.gongxiangsc.com/2023/02/13/da1472d9-db19-4b7d-9f40-305572f1f658.jpg"/>你还只想着坚实的机会 </p>

可正常通过富文本编辑器展示。