首先了解下小程序自带editor支持情况:
1. 没有删除对应的Api
2. 真机不支持wxfile://(临时路径)
3. 不支持图片云ID
4. 云存储不支持移动文件方法
以上都是围绕editor图片冗余处理 发现的问题,其中***问题3 不支持图片云ID***官方已知晓也在开发中,希望尽快出来!
###方案: 云开发editor图片上传思路
1.选择图片后即上传图片(依然是上传图片到temp目录)
2.用户上传同时记录下 [本地图片临时路径,已替换云图下载路径]
3.在返回的html找出当前图片云路径并封装成数组(云图下载地址数组)
4.[本地图片临时路径,已替换云图下载路径]->[云图下载路径] 对应 图片临时地址
5.在用[本地图片临时路径]上传 你要上传的路径
此方法只能解决云开发也可以使用小程序富文本editor,
优点: 1 用户在编辑器里对图片操作(随意)
反正上传图片在 temp文件目录,一键批量
缺点:1.上传图片要执行两次,编辑时上传,提交时上传!
2. 也不能解决图片冗余占用空间问题(主要体现在二次编辑)
editor 我封装组件,方便以后其他页面使用,代码贴实现功能部分!
1 解决不支持图片云id
其实也就是把图片File ID 替换成下载路径
let regsrc = cloudimg[0],
imgReg = new RegExp('cloud://kc-xxx.222-kc-0da123-12543'),
imgsrc = regsrc.replace(imgReg, ' https://222-kc-0da123-12543.tcb.qcloud.la');
that.editorCtx.insertImage({
src: imgsrc, //替换后图片下载地址即可显示
success: function () {
//这里可以返回
// [本地图片临时路径,已替换云图下载路径]
}
})
2用户提交后,找出html中<img> 标签并封装成数组
此时返回的图片数组里面全部是下载地址的链接
/*获取html中的img
@reshtml string 包含html标签
*/
getHtmlimg(reshtml){
let tempimg = [];
return new Promise(function (resolve, reject) {
//1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符
let imgReg = /<img.*?(?:>|\/>)/gi, //匹配图片(g表示匹配所有结果i表示区分大小写)
srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i, //匹配src属性
arr = reshtml.match(imgReg); //所有已成功匹配图片的数组
//2.从匹配出来的结果(img标签中)循环匹配出图片地址(即src属性)
for (var i = 0; i < arr.length; i++) {
let src = arr[i].match(srcReg);
if (src[1]) {
tempimg.push(src[1])
}
}
return resolve(tempimg)
})
},
3 找出图片临时地址
因为我要用临时地址重新上传图片 到指定目录
/抽离出要上传图片的临时地址
for (let k = 0; k<editorimage.length;k++){
for (let i=0;i<tempimg.length;i++){
if (editorimage[k][1] == tempimg[i]){
tempPath[i] = editorimage[k][0][0]
}
}
}
解决editor图片冗余占用空间的问题,必须依赖 问题1
tip: 删除对应的APi 是指editor
里删除图片对应的funcion
撤销、清空 有对应的方法,而图片删除只是在富文本编辑器里删除了图片而没
有对应的删除方法。
到此结束… 真正的实现还是期待官网多给予支持,现在只能暂时用下这蹩脚的方案!
冗余?