云开发小程序editor富文本编辑器上传图片实现增删改

在做一个博客小程序，用的是云开发，用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})},

这样就实现富文本图片的增删改。

云开发小程序editor富文本编辑器上传图片实现增删改相关推荐

小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
uniapp 微信小程序 editor富文本编辑器 api 使用记录
文章目录 1.查看官方示例 2.关于富文本编辑器的工具栏 3.自己实践一下效果这里记录一下自己研究学习的结果之前一直使用textarea 来进行内容的编辑.但是局限性还是太多,最近发现了edit ...
使用微信小程序editor富文本编辑器（爬坑要点）
编辑器wxml <view class="container" style="height:{{editorHeight}}px;"><edi ...
微信小程序教程-富文本编辑器editor
效果图: 1.首先进入官方文档的editor地址 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 2.可点 ...
微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统百度了多种方法,也试用了很多方法,最终觉得wxP ...
微信小程序实现富文本编辑器
1.参考官方文档:editor | 微信开放文档在文档最下方有示例代码,如下图: 点击"在开发者工具中预览效果" 2.将示例代码保存至桌面,以便后期操作 3.文件夹中有一下文 ...
微信小程序接收富文本编辑器图片大小解决方法
一.先上案列: 1.图片没有尺寸影响整体布局二.改完之后: 三.上代码展示 1.wxml  <vi ...
小程序解析富文本编辑器中的内容
GitHub网站上发现一个很好的项目,记录一下源码地址:https://gitee.com/maplemei/xm-select
微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...

云开发小程序editor富文本编辑器上传图片实现增删改

云开发小程序editor富文本编辑器上传图片实现增删改相关推荐

最新文章

热门文章