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

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)
									})
							}
						})

					}
				});

 输出结果如下,真的很多,从划红线的地方往后(展示不全)

 3、最开始数据库设计的是varchar,但明显报错了,在微信开发者工具的控制台提示“length”的问题,这里没有截图。

在IDEA项目中,提示如下报错

 所以这个时候需要修改数据库中字段类型,通过借鉴广大网友的文章。尝试了mediumtext类型。

不知道为啥,遇到了一些情况。

后来尝试了longtext,实现了想要的效果,(字段长度刚开始我设置了20000,但保存后是0,应该不用特意设定就可以)。

 

好啦,这样就可以把数据存入数据库中了

 

 最后前端效果如图所示

 参考了一些文章,如下:

1、根据这篇,解决了数据库字段长度问题

图片以base64格式存储进数据库 字段使用类型_Architect_csdn的博客-优快云博客_base64 字段类型

2、根据这两篇,提供解决问题思路,学会转base64格式

image-tools - DCloud 插件市场

3、 了解了base64格式的数据开头部分的含义

在HTML中显示base64格式的img图片_viceen的博客-优快云博客_html加载base64图片

4、这篇,特有意思。跟着方法3做了,结果往下一滑,更新后说H5上不能转了╮(╯▽╰)╭

小程序 本地临时文件tempFilePaths和base64互转_liu__software的博客-优快云博客 

### 如何在 UniCloud 中展示图片 为了实现在 UniCloud 中展示图片的功能,可以利用 `uniCloud` 提供的服务端接口来处理图片存储,并通过前端页面请求这些资源。下面是一个完整的示例说明。 #### 创建云函数用于保存图片路径数据库 首先,在服务器端创建一个新的云函数 `saveImageInfo.js` 来接收客户端发送过来的图片 URL 并将其存入集合中: ```javascript // saveImageInfo.js const db = uniCloud.database() exports.main = async (event, context) => { try { const { imageUrl } = event; await db.collection('images').add({ url: imageUrl, createTime: new Date() }); return { code: 0, message: 'success' }; } catch (err) { console.error(err); return { code: -1, message: err.message || '操作失败' } } }; ``` 此部分代码定义了一个简单的 RESTful API 接口[^2],它接受 POST 请求并将传入的数据写入名为 `images` 的表内。 #### 前端调用逻辑实现上传并获取返回链接 接着是在应用层面上编写相应的 JavaScript 方法来进行实际交互。这里假设已经完成初始化工作并且能够正常访问云端服务。 ```html <template> <view class="container"> <!-- 图片预览 --> <image v-for="(item,index) in imageList" :key="index" :src="item.url"></image> <!-- 文件选择器 --> <button type="primary" @click="chooseAndUpload">点击上传</button> </view> </template> <script> export default { data() { return { imageList: [] } }, methods: { chooseAndUpload() { let that = this; // 调起选择本地文件对话框 uni.chooseImage({ count: 1, success(res) { const tempFilePaths = res.tempFilePaths; // 开始上传过程 uni.uploadFile({ filePath: tempFilePaths[0], name: 'file', url: `${process.env.VUE_APP_BASE_API}/upload`, // 替换成自己的API网关地址 formData: {}, success(uploadRes) { if (JSON.parse(uploadRes.data).code === 0) { // 将新获得的URL加入列表显示出来 that.imageList.push({url: JSON.parse(uploadRes.data).data}); // 同步数据至UniCloud uni.request({ method:"POST", url:`${process.env.UNI_CLOUD_URL}/api/save-image-info`, header:{ "content-type":"application/json" }, data:{imageUrl:that.imageList[that.imageList.length-1].url}, success(saveRes){ console.log("Save result:",saveRes); } }) } } }); } }); } } } </script> ``` 这段 Vue 组件展示了如何让用户挑选一张照片并通过 `uni.uploadFile()` 函数提交给指定位置;成功之后再把得到的结果添加进视图中的数组里以便即时渲染更新界面[^3]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值