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