uniapp editor组件如何上传图片

╰+哭是因爲堅強的太久メ 2024-04-22 15:10 79阅读 0赞

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

![166ebd0b755241638b7e95249717d26b.png][]

## 一、如何处理图片，好让它在 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);

[166ebd0b755241638b7e95249717d26b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2901e4f7e54644f397c4e4a60fcfd4c0.png