标签：文本编辑 arr item let editor str 增删 图片 fileIDArr

在做一个博客小程序，用的是云开发，用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
    })
  },

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

标签：文本编辑,arr,item,let,editor,str,增删,图片,fileIDArr
来源： https://blog.csdn.net/qq_38332693/article/details/122698697

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。