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))
//直接复制即可
vue quill富文本编辑器上传图片遇到的坑_第1张图片

其结果如下:

你还只想着坚实的机会

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

你可能感兴趣的:(vue.js,前端,javascript,json)