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.mfbz.cn/a/41949.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ARP解析MAC地址的全过程(ARP的工作机制)

目录 ARP解析MAC地址的过程&#xff1a; 源码等资料获取方法 以太网环境下&#xff0c;同一个网段的主机之间需要互相知道对方的MAC地址&#xff0c;才能访问。 TCP/IP协议栈从上层到下层的封装过程中&#xff0c;第三层封装需要知道目的IP&#xff0c;第二层封装需要知道目…

计算机毕业论文选题推荐|软件工程|信息管理|数据分析|系列一

文章目录 导文题目导文 计算机毕业论文选题推荐|软件工程|信息管理 (***语言)==使用其他任何编程语言 例如:基于(***语言)门窗账务管理系统的设计与实现 得到:基于JAVA门窗账务管理系统的设计与实现 基于vue门窗账务管理系统的设计与实现 等等 题目 基于requests多线程…

Scala(二)

第2章 变量和数据类型 2.1 注释 Scala注释使用和Java完全一样。 注释是一个程序员必须要具有的良好编程习惯。将自己的思想通过注释先整理出来&#xff0c;再用代码去体现。 1&#xff09;基本语法 &#xff08;1&#xff09;单行注释&#xff1a;// &#xff08;2&#xff0…

动态规划——删除并获得点数

题目链接 leetcode在线oj题——删除并获得点数 题目描述 给你一个整数数组 nums &#xff0c;你可以对它进行一些操作。 每次操作中&#xff0c;选择任意一个 nums[i] &#xff0c;删除它并获得 nums[i] 的点数。之后&#xff0c;你必须删除 所有 等于 nums[i] - 1 和 nums…

spring5源码篇(10)——spring-aop代理过程

spring-framework 版本&#xff1a;v5.3.19 文章目录 1、ProxyFactory1.1、createAopProxy() 创建AopProxy1.2、getProxy() 创建代理对象1.3、JdkDynamicAopProxy#invoke 代理逻辑1.3.1、advised.getInterceptorsAndDynamicInterceptionAdvice() 匹配添加的advisor并转化成所需…

【FAQ】API6低代码开发问题汇总

参考文档&#xff1a; 低代码开发参考文档&#xff1a; 文档中心:使用低代码进行开发 基于景区模板开发元服务&#xff1a; 文档中心:模板简介 使用API6低代码开发遇到的问题汇总情况如下&#xff1a; 1、低代码环境下&#xff0c;如何实现box-shadow阴影效果的配置&#…

K8s核心概念 Controller

K8s核心概念 Controller Kubernetes核心概念 Controller一、pod控制器controller1.1 Controller作用及分类1.2 Deployment1.2.1 Replicaset控制器的功能1.2.2 Deployment控制器的功能1.2.3 Deployment用于部署无状态应用1.2.4 创建deployment类型应用1.2.5 访问deployment1.2.6…

优思学院|六西格玛管理:依据事实的质量管理方式

一个企业的质量管理制度是否规范&#xff0c;也就是质量管理体系是否很完备的问题&#xff0c;要考察管理体系是否还有哪里不尽完美&#xff1f;各部门之间的连系、调整是否能够顺利进行&#xff1f;各自是否达成在质量保证上的任务等&#xff0c;进行质量管理体系的审核&#…

通用文字识别OCR 之实现自动化办公

摘要 随着技术的发展&#xff0c;通用文字识别&#xff08;OCR&#xff09;已经成为现代办公环境中不可或缺的工具之一。OCR技术可以将印刷或手写文本转换为可编辑或可搜索的数字文本&#xff0c;极大地提高了办公效率并实现了自动化办公。本文将深入探讨OCR技术在实现自动化办…

关于你欠缺的NoSQL中的redis和mongoDB

文章目录 前言一、在string list hash结构中&#xff0c;每个至少完成5个命令&#xff0c;包含插入 修改 删除 查询&#xff0c;list 和hash还需要增加遍历的操作命令1、STRING类型2、List类型数据的命令操作&#xff1a;3、举例说明list和hash的应用场景&#xff0c;每个至少一…

经济和行政手段使双高企业降低能耗总量和能耗强度,提高能源利用效率-安科瑞黄安南

摘要 2022年6月29日工信部、发改委、财政部、生态环境部、国资委、市场监管总局六部门联合下发《关于印发工业能效提升行动计划的通知》&#xff08;工信部联节〔2022〕76号&#xff0c;以下简称《行动计划》&#xff09;&#xff0c;主要目的是为了提高工业领域能源利用效率&…

黄皮书-线接触热弹流润滑 Fortran+Matlab转译代码

原Fortran代码有错误&#xff0c;进行了修改&#xff0c;数值上差别不大。根据Fortran代码转的Matlab&#xff0c;可以完美运行&#xff0c;但是因为精度问题有差异&#xff0c;只能说趋势是一致的。 需要私我-资源里只是Fortran运行结果

Rdkit|分子3D构象生成与优化

github; 地址 文章目录 Rdkit|分子3D构象生成与优化构象生成算法概述基于距离&#xff08;distance-based&#xff09;代码示例 距离几何算法生成3D结构距离几何ETKDG生成3D构象距离几何ETKDG生成多构象将Conformer类转为Mol类手动对齐 距离几何ETKDGMMFF生成3D构象距离几何ETK…

4.日志分布式-ELK

文章目录 日志分布式-ELK概念可以添加的其它组件filebeat 结合 logstash 带来好处为什么要使用 ELK缓存和Fluentd完整日志系统基本特征ELK 的工作原理 部署Elasticsearchjdk环境和防火墙配置安装Elasticsearch修改配置文件优化内存参数启动程序并测试效果安装 Elasticsearch-he…

ThunderScope开源示波器

简介 4CH&#xff0c;1GSa/S 开源示波器。前端很简洁&#xff0c;BUF802LMH6518&#xff0c;ADC是HMCAD1511&#xff0c;用Xilinx A7 FPGA进行控制&#xff0c;数据通过PCIE总线传输到上位机处理。目前这个项目已经被挂到了Xilinx官网&#xff0c;强。 设计日志&#xff1a;h…

AR气象博物馆模拟体验提升青少年认知

国际气象节主要目的是唤起人们对气象工作的重视和热爱。近年来&#xff0c;极端天气频发&#xff0c;人们需要提高警惕&#xff0c;AR气象远程普利用ar技术特有的沉浸式的体感互动&#xff0c;通过模拟演练提升体验者的安全防范意识和求生技巧。 系统结合VR虚拟现实、AR增强现实…

VSCode下载安装(保姆级--一步到胃)

前言 Visual Studio Code&#xff08;简称“VSCode” &#xff09;是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的&#xff0c;针对于编写现代Web和云应用的跨平台源代码编辑器&#xff0c;可在桌面上运行&#xff0c;并且…

机械臂的雅克比矩阵推导

1. 线速度和角速度的递推通式推导 p i p i − 1 R i − 1 r i − 1 , i i − 1 \mathbf{p}_{i}\mathbf{p}_{i-1}\mathbf{R}_{i-1} \mathbf{r}_{i-1, i}^{i-1} pi​pi−1​Ri−1​ri−1,ii−1​ p i − 1 \mathbf{p}_{i-1} pi−1​是 { i − 1 } \{i-1\} {i−1}坐标系的原点的…

[PHP]解决exec执行unzip出现中文文件名乱码的问题

查看Linux编码&#xff0c;如下图可看出Linux编码是zh_CN.UTF-8 问题截图&#xff1a; 以下代码都会产生乱码 exex(unzip -d /xxx /x/test.zip); exex(unzip -O zh_CN.UTF-8 -d /xxx /x/test.zip); exex(unzip -I zh_CN.UTF-8 -d /xxx /x/test.zip); 解决方法&#xff1a; e…

大模型开发(五):实现Jupyter本地调用OpenAI API

全文共3000余字&#xff0c;预计阅读时间约15分钟 | 满满干货&#xff0c;建议收藏&#xff01; 大模型开发(五)&#xff1a;实现Jupyter本地调用OpenAI API OpenAI作为本轮大语言模型技术进步的先驱&#xff0c;其系列大型模型在效果上一直保持着领先。其推出的各类模型如文本…