在做一个博客小程序，用的是云开发，用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})},
这样就实现富文本图片的增删改。
