ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-01-26 12:04:28  阅读:46  来源: 互联网

标签:文本编辑 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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有