uniapp editor组件 如何上传图片

需求:我们在使用uniapp的editor组件时,主要是为了保持输入内容的格式。里面的文字可以有颜色、粗体、排列样式,可以插入图片。就像下面这样。

 一、如何处理图片,好让它在 rich-text组件中显示 ?

逻辑:我们处理图片的时机应该是在最后提交的状态

1. 获取你编辑器输入的内容

//editorCtx是富文本编辑器的实例
editorCtx.getContents({success: function(res){console.log(res);}
})    

下面就是打印的结果,html就是我需要提交到数据库的内容,目前img标签的src里面的值是本地的临时路径,需要将其更换为网络路径

{"errMsg": "getContents:ok","text": "做测试,插入图片\n\n","html": "<p>做测试,插入图片</p><p><img src=\"file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1689576031612_IMG_20230625_194227_1689420631723.jpg\" data-local=\"file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1689576031612_IMG_20230625_194227_1689420631723.jpg\" width=\"100%\" height=\"100%\"></p>","delta": {"ops": [{"insert": "做测试,插入图片\n"},{"attributes": {"data-local": "file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1689576031612_IMG_20230625_194227_1689420631723.jpg","height": "100%","width": "100%"},"insert": {"image": "file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/compressed/1689576031612_IMG_20230625_194227_1689420631723.jpg"}},{"insert": "\n"}]}
}

2. 在html的字符串中得到图片的临时路径

//strHtml就是获得的html全部标签
let cc = strHtml.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {console.log("图片临时路径",capture);console.log("每一个img标签",match);
});


3. 将图片上传到OSS或服务器,获取公开访问图片路径               

内容略过

4. 将返回来的 “图片公开访问路径” 替换到html字符串中

注意:img标签不设置宽度和高度,这样在App时就无法正常显示出来

let imgPublic = ["网络路径1","网络路径2","网络路径3"]
let imgIndex = 0; //imgIndex是个下表索引 
let newStr= strHtml.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,(match, capture)={let tempImg = match.replace(/<img(.*?)>/g,`<img src="${imgPublic[imgIndex]}">`);imgIndex++;return tempImg; //可以将修改的内容返回去
});
console.log("已经替换好网络路径的新字符串",newStr);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/26319.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式详解(一):工厂方法——Factory Method

目录导航 工厂方法及其作用工厂方法的好处工厂方法的实现关系图实现步骤 工厂方法的适用场景工厂方法举例 工厂方法及其作用 工厂方法是一种创建型设计模式。所谓创建型设计模式是说针对创建对象方面的设计模式。在面向对象的编程语言里&#xff0c;我们通过对象间的相互协作&…

STC89C52--实时时钟(DS1302)

目录 一:介绍 1:具体介绍 2:DS1302总结 3:RTC 二:使用说明 1:电路图和内部结构 A:电路图 B:内部结构 C:CE D:时钟/日历(SCLK) E:写保护位 2:命令字节 3:寄存器地址/定义 4:时序图与数据读写 A:单字节写步骤代码&#xff08;Write&#xff09; B: 单字节读步骤代码…

基于jsp+Servlet+mysql的汽车销售系统

基于jspServletmysql的汽车销售系统 一、系统介绍二、功能展示1.项目骨架2.登录界面3.首页4.购物车5.添加车辆6、编辑车辆信息 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目类型&#xff1a;Java web项目 项目名称&#xff1a;基于JSPServlet的汽车销售系统 项目架…

WEB:Web_php_unserialize

背景知识 反序列化函数及绕过 正则表达式及绕过 题目 源码解析&#xff08;参考链接在最后&#xff09; <?php class Demo { //定义一个类private $file index.php; //变量属性public function __construct($file) { //类方法$this->file $file; …

ToT: 利用大语言模型进行有意识的问题解决(上)

ToT 摘要介绍利用大语言模型进行有意识的问题解决1. 思维分解2. 思维产生 G(p,s,k)3. 状态评估V(p,S)4. 搜索算法 实验相关工作讨论 原文&#xff1a; 摘要 语言模型正在迅速成为一般问题解决的部署&#xff0c;但在推理过程中仍然局限于 标记级别&#xff08;token-level&…

基于深度学习的高精度鸟类目标检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度鸟类目标&#xff08;鹦鹉&#xff08;Crested Myna&#xff09;、麻雀&#xff08;Eurasian Tree Sparrow&#xff09;、黑头文鸟&#xff08;Chestnut Munia&#xff09;、白领翡翠&#xff08;Collared Kingfisher&#xff09;、太阳鸟…

论文笔记:Deep Spatio-Temporal Residual Networks for Citywide Crowd FlowsPrediction

2017 AAAI 使用时空残差网络ST-ResNet 进行 城市区域流入流出客流量预测 1 研究对象 城市客流流入流出 根据经纬度将城市划分为网格 IJ 1.1 难点 空间依赖性 时间依赖性 外部影响 2 模型 3 实验 北京出租车数据纽约自行车数据 评价指标&#xff1a;RMSE

vue3.0之组合API有哪些(详解)

vue3.0之组合API有哪些 一、setup函数二、生命周期三、reactive函数四、toRef函数五、toRefs函数六、ref函数七、知识运用案例八、computed函数九、watch函数十、ref属性十一、父子通讯1.父传子2.子传父 十二、依赖注入十三、补充 v-model语法糖(简写)十四、补充 mixins语法 一…

【grasshopper】【犀流堂】【算法】Anemone雨水径流模拟-笔记

文章目录 Anemone雨水路径模拟available options可用选项grasshopper面切线几何原理 案例1&#xff1a;surface地形1. 拾取地形曲面surface2. 曲面上根据divide surface划分点points3.将曲面上的划分点用surface closest point投影到曲面上4.align plane旋转平面x轴与世界Z夹角…

OCPM和CPM有什么区别?

CPM和OCPM这两种收费模式的对比 Cpm&#xff1a;表示千次展示费用&#xff0c;是数据指标&#xff0c;也是一种出价方式。代表展现一千次的消费&#xff0c;也就是你展现1000次要给媒体多少钱 例如某企业广告曝光量是50万&#xff0c;总广告价格为10000元&#xff0c;那么千人…

mongodb练习---增删改查

环境&#xff1a; 1. 创建一个数据库 名字grade 2. 数据库中创建一个集合名字 class 3. 集合中插入若干数据 文档格式如下 &#xff5b;name:zhang,age&#xff1b;10,sex:m,hobby:[a,b,c]&#xff5d; hobby: draw sing dance basketball football pingpong compu…

计算机网络-应用层

目录 一、应用层概述 二、客户-服务器方式(C/S方式)和对等方式(P2P方式) &#xff08;一&#xff09;客户/服务器 (Client/Server&#xff0c;C/S) 方式 &#xff08;二&#xff09;对等(Peer-to-Peer&#xff0c;P2P) 方式 &#xff08;三&#xff09;总结 三、动态主机…