在使用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>

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