位置: IT常识 - 正文
使用uni-app的uni.chooseImage获取的图片路径，存储到数据库中，无法在前端展示该路径的图片(uni app)
编辑：rootadmin推荐整理分享使用uni-app的uni.chooseImage获取的图片路径，存储到数据库中，无法在前端展示该路径的图片(uni app)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uni-app实战教程,uni-app实例教程,uni-app实战教程,uni-app实例教程,uni app ui,uni app ui,uni app ui,uni-app实例教程,内容如对您有帮助，希望把文章链接给更多的朋友！
html,js,uni-app,
首先我在uni-app中使用如下方法添加图片
uni.chooseImage({count: 1, //count: 6, //默认9sizeType: ['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, //默认9sizeType: ['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的博客-CSDN博客_base64 字段类型
2、根据这两篇，提供解决问题思路，学会转base64格式
image-tools - DCloud 插件市场
3、 了解了base64格式的数据开头部分的含义
在HTML中显示base64格式的img图片_viceen的博客-CSDN博客_html加载base64图片
4、这篇，特有意思。跟着方法3做了，结果往下一滑，更新后说H5上不能转了╮(╯▽╰)╭
小程序 本地临时文件tempFilePaths和base64互转_liu__software的博客-CSDN博客
上一篇：苹果macOS Catalina10.15.6更新了什么?(苹果15手机价格和图片颜色)
下一篇：这9个Linux命令非常危险 请大家慎用(linux相关命令及用法)
