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