基于云开发.jpg
首先了解下小程序自带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
撤销、清空 有对应的方法，而图片删除只是在富文本编辑器里删除了图片而没
有对应的删除方法。
到此结束.. 真正的实现还是期待官网多给予支持，现在只能暂时用下这蹩脚的方案！
网友评论