云开发小程序editor富文本编辑器上传图片实现增删改

本文主要是介绍云开发小程序editor富文本编辑器上传图片实现增删改，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在做一个博客小程序，用的是云开发，用editor编辑器上传图片，一开始直接传图片会出现真机不显示的情况，排查原因后发现是因为传入的是本地路径，而小程序要求的是https或者云id，于是做了以下修改：先上传云存储中再读取，但是又有一个问题，就是如果我上传了，但是又不想要了，就删除掉，但是图片还是会存在云存储中占用空间，解决方案接下面讲。

insertImage() {
    const that = this;
    wx.chooseImage({
      count: 1,
      success: function (response) {
        let path = response.tempFilePaths[0];
        let str = '';
        for (let i = 0; i < 4; i++) {
          //生成一个0到25的数字
          let ranNum = Math.ceil(Math.random() * 25);
          //大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;
          //然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
          str = str + (String.fromCharCode(65 + ranNum));
        }
        let name = (Math.random() * 1000).toFixed(2);
        let cloudPath = 'blogImg/' + str + name + path.match(/\.[^.]+?$/)[0];
        wx.cloud.uploadFile({
          // 指定上传到的云路径
          cloudPath: cloudPath,
          filePath: path,
          success: e => {
            that.editorCtx.insertImage({
              src: e.fileID,
              data: {
                id: 'abcd',
                role: 'god'
              },
              // width: '100%',
              success: function () {
                console.log('插入图片成功')
              }
            })
          },
        })

      }
    })
  },

解决方案是监听eidtor富文本编辑器的变化，找出图片路径，将不存在的图片从云存储删除掉。

 /**
   * 监听富文本框
   */
  inputChange: function (e) {
    const that = this;console.log(e)
    let fileIDArr = this.data.fileIDArr;
    let arr = [];
    e.detail.delta.ops.forEach(item=>{
      if(item.insert.image){
        arr.push(item.insert.image)
      }
    })
    if(fileIDArr.length>arr.length){
      fileIDArr.forEach((item,idx)=>{
        let index = arr.findIndex(res=>res==item);
        if(index==-1){
          wx.cloud.deleteFile({
            fileList: [item]
          }).then(res => {
           // console.log(res.fileList)
          }).catch(error => {
          })
        }
      })
    }
    that.setData({
      content: e.detail.html,
      fileIDArr:arr
    })
  },

这样就实现富文本图片的增删改。

这篇关于云开发小程序editor富文本编辑器上传图片实现增删改的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！