使用uni-app的uni.chooseImage获取的图片路径，存储到数据库中，无法在前端展示该路径的图片

最新推荐文章于 2025-05-19 17:50:29 发布

原创最新推荐文章于 2025-05-19 17:50:29 发布 · 2.1w 阅读

61 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #intellij idea #html #javascript #小程序

html,js,uni-app,

首先我在uni-app中使用如下方法添加图片

uni.chooseImage({
					count: 1, //count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {

						console.log(JSON.stringify(res.tempFilePaths));

					}
				});

通过uni.chooseImage获取的图片路径如图所示，是“http://tmp/wx……”开头的

之后在浏览器界面，想展示该路径图片

结果如下，路径正确，但是不显示图。

原因如下：image-tools - DCloud 插件市场

uni-app、微信小程序和5+APP使用的路径不支持网络路径

解决方法：

我的做法是把路径转化为base64,这个格式的图片可以在前端展示~

1、下载插件，点击绿色的，然后打开，选择你的项目，这个真的很快（我经常担心插件安装过程麻烦，但这个真的很快）image-tools - DCloud 插件市场

之后，项目中会出现这个

2、修改uni-app中代码，先引入

import {pathToBase64} from '../../js_sdk/mmmm-image-tools/index.js'

接着修改uni.chooseImage里代码

uni.chooseImage({
					count: 1, //count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						//解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: (path) => {
								pathToBase64(path.path).then(base64 => {
										console.log("base64="+base64); // 这就是转为base64格式的图片
									})
									.catch(error => {
										console.error(error)
									})
							}
						})

					}
				});

输出结果如下，真的很多，从划红线的地方往后（展示不全）