uniapp editor编辑器图片上传到服务器获取HTML字符串代码以及图片上传成功编辑器反选页面渲染失败图片无法显示 src拼接了相对路径

心已赠人 2022-10-15 04:44 44阅读 0赞

在官方代码下下载editor相关代码复制到自己的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]

图片上传到服务器  
在insertImage()中加入uploadFile

insertImage() { 
    				var that = this;
    				uni.chooseImage({ 
    					count:1,
    					sizeType: ['original', 'compressed'],
    					sourceType: ['album', 'camera'],
    					success(res) { 
    						console.log(res.tempFilePaths[0])
    						uni.uploadFile({ 
    							url: that.$globals.uploadUrl+'/api/img/open/upload', //服务器上传图片接口 
    							name: 'file',
    							filePath: res.tempFilePaths[0],
    							success(res) { 
    								var data = JSON.parse(res.data);
    								that.editorCtx.insertImage({ 
    									width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
    									height: 'auto',
    									src: that.$globals.imgUrl+data.data,//接口返回的图片路径
    									alt: '图像',
    									success: function() { 
    										
    										console.log(that.$globals.imgUrl+data.data)
    										console.log('insert image success')
    									}
    								})
    								console.log(that.editorCtx)
    							}
    						})
    					}
    				})
    			},

获取HTML代码字符串  
view代码加上@input=“getText”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]  
js methods:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]

getText(e) { 
    				var that = this;
    				console.log(e.detail.html); //带标签内容 作者qq1023732997
    				console.log(e.detail.text); //纯文本内容
    				this.infos = e.detail.html
    			},

图片上传成功编辑器反选页面渲染失败图片无法显示 src拼接了相对路径  
![在这里插入图片描述][2021052314351762.png_pic_center]  
这里的原因其实很简单 如果出现这种问题请检查你图片地址是否加了http://或者https://前缀 如果不加会默认拼接上你当前页面的路径导致渲染失败

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]: /images/20221014/e1e6132e009e433a8a2f1af8e171783f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]: /images/20221014/6a4742c3ef3f440c9f05bf11a3ffccf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]: /images/20221014/7d3d0081f5094bf098993e5f93155dd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]: /images/20221014/e4444da1583a433ba37821905c6a8c33.png
[2021052314351762.png_pic_center]: /images/20221014/23cd053256e442678b2132c5bea2a4c8.png