uniapp editor组件 如何上传图片

news2025/3/6 3:38:38

需求:我们在使用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.coloradmin.cn/o/762600.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3和gin框架实现简单的断点续传

vue3和gin框架实现简单的断点续传 前端代码 Test.vue <template><div><inputtype"file"ref"uploadRef"change"upload"multiple/><templatev-for"item in fileList":key"item.key"><br><…

三步数据转报表,奥威BI-金蝶云星空SaaS版给你极速数据分析体验

根据经验&#xff0c;要部署一套大数据分析软件&#xff0c;至少也要准备环境、下载安装配置软件、配置数据源&#xff0c;有些完全从零开始入手的还面临着分析模型的搭建等难题。这些操作不说难度如此&#xff0c;光是耗时就不短&#xff0c;会给企业带来不小的成本压力。而奥…

读书笔记怎么写?《如何阅读一本书》读书笔记!

读书笔记有助于提高读书的效率&#xff0c;引发更多的思考。在阅读的过程中&#xff0c;读书笔记该怎么写&#xff1f;本文借助 boardmix在线白板&#xff0c;以《如何阅读一本书》为例&#xff0c;全面剖析如何做好读书笔记。 1.作者信息 《如何阅读一本书》是由莫提默J. …

【Maven】Maven下载,配置以及基本概念

文章目录 1. Maven简介2. Maven下载3. Maven环境配置4.Maven的基本概念4.1 仓库4.2 坐标4.3 仓库配置(修改IDEA默认Maven库) 1. Maven简介 Maven是一个Java项目管理工具和构建工具&#xff0c;用于管理项目的依赖关系、构建过程以及项目的部署。它是Apache软件基金会的开源项目…

ShardingSphere核心概念

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…

INDEMIND:视觉SLAM,助力服务机器人再进化

毋庸置疑&#xff0c;VSLAM将是推动机器人再次迭代的关键之一。 移动的“机器”还是机器人&#xff1f; 随着机器人的落地量持续增长&#xff0c;早期“忽略”的产品缺陷&#xff0c;正在引发越来越严重的负面影响。一方面&#xff0c;激光SLAM虽基于Cartographer算法不断演进…

吐血整理,接口测试到接口自动化集成总结,你不知道的都在这...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 后端接口都测试什…

mybatis-plus 支持不同数据源sql切换

mybatis-plus 支持不同数据源sql切换 本篇内容主要讲解的是mybatis-plus 支持不同数据源sql切换 直接上代码 1、结构代码 2、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactI…

mockserver实践:本地启动以命令行方式运行,实现挡板和转发

mockserver 官网学习地址 https://www.mock-server.com/#what-is-mockserver mockserver下载和启动 下载 官网下载jar包 https://www.mock-server.com/where/downloads.html 本次实践所用jar包 mockserver-netty-5.14.0-shaded.jar 本地启动 需要先准备好jave环境 1.普通…

5、WAMP配置虚拟主机

配置虚拟主机后可实现用域名的方式访问项目。 1、从WAMP图标&#xff0c;点击左键&#xff0c;进行虚拟主机管理&#xff0c;然后添加上虚拟主机名&#xff0c;即将来的浏览器的地址名&#xff0c;然后输入相应的文件夹。这种修改方式&#xff0c;直接自动修改了hosts文件。 2…

frp内网穿透工具实现局域网服务访问

frp工具实现内网穿透 frp主要作用是实现内网穿透&#xff0c;将内外网端口进行映射&#xff0c;这样如果我想访问局域网内的某项服务&#xff0c;那么我直接访问公网上相对应的映射端口即可。 frp安装配置较复杂&#xff0c;这里我们直接使用frp docker容器安装。所以如果主机…

第二十章:CANet:具有迭代细化和专注少样本学习的无类别分割网络

0.摘要 最近在语义分割方面的进展是由深度卷积神经网络和大规模标注图像数据集推动的。然而&#xff0c;像素级别的数据标注是繁琐和昂贵的。此外&#xff0c;训练好的模型只能在一组预定义的类别中进行预测。在本文中&#xff0c;我们提出了CANet&#xff0c;一种无类别偏见的…

Spark编程-使用SparkCore求TopN,Max_Min_Value

简介 使用SparkCore求top5值编程&#xff0c;最大最小值 求订单前五的TOP5值 数据 数据字段如下&#xff1a;orderid,userid,payment,productid 需求如下&#xff1a;从文本文件中读取数据&#xff0c;并计算出前5个payment(订单的付款金额)值 //字段 orderid,userid,payme…

Java读取INI文件详解及案例

引言&#xff1a; INI文件是一种常用的配置文件格式&#xff0c;它采用了键值对的形式存储配置信息。在Java编程中&#xff0c;读取和解析INI文件是一个常见的任务。本文将详细介绍如何使用Java读取INI文件&#xff0c;并提供一个案例演示。 ---------------文章目录---------…

给2023年还想要成为网络工程师的朋友的一份学习福利

2023的夏天再怎么热&#xff0c;网络工程师工作的机房也会让你瑟瑟发抖。 很久没有给粉丝们分享网络工程师学习资料了&#xff0c;如果你当下还在为成为网络工程师而学习&#xff0c;不妨顺手拿走这份网工资料包再出发&#xff0c;希望可以给大家的学习一些帮助。 网工光速入门…

快速数据处理:限定表格某些字段是否可见、只读

目录 1 前言 2 打开字段属性表进行修改 3 测试一下几个字段只读属性 1 前言 实际操作中&#xff0c;某些字段不需要显示出来&#xff0c;某些字段需要显示&#xff0c;但是不可修改。我们可以通过简单设置来实现这些。 2 打开字段属性表进行修改 从左下基础表格列表中&am…

Day55|392.判断子序列 、 115.不同的子序列

392.判断子序列 1.题目&#xff1a; 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是…

第五章内存系统(Cortex-M7 Processor)

目录 第五章内存系统 5.1关于内存系统 5.2&#xff08;Speculative&#xff09;推测性访问 5.2.1系统设计注意事项 5.3故障处理 5.3.1故障 5.3.2使用模型 5.4内存类型和内存系统行为 5.5AXIM接口 5.5.1AXI属性和事务 5.5.2用于AXIM接口访问的标识符 5.5.3AXI特权信息 5.…

Python案例分析|文本相似度比较分析

本案例通过设计和实现有关文本相似度比较的类Vector和Sketch&#xff0c;帮助大家进一步掌握设计Python类来解决实际问题的能力。 01、文本相似度比较概述 通过计算并比较文档的摘要可实现文本的相似度比较。 文档摘要的最简单形式可以使用文档中的k-grams&#xff08;k个连…

springboot第30集:springboot集合问题

Logstash Logstash 是开源的服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据、格式化数据&#xff0c;然后将数据发送到es进行存储。 ElasticSearch Elasticsearch 是基于JSON的分布式搜索和分析引擎&#xff0c;是利用倒排索引实现的全文索引。 KibanaKibana 能够…