位置: IT常识 - 正文

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

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

推荐整理分享使用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)})}})}});使用uni-app的uni.chooseImage获取的图片路径,存储到数据库中,无法在前端展示该路径的图片(uni app)

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

 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博客 

本文链接地址:https://www.jiuchutong.com/zhishi/277518.html 转载请保留说明!

上一篇:苹果macOS Catalina10.15.6更新了什么?(苹果15手机价格和图片颜色)

下一篇:这9个Linux命令非常危险 请大家慎用(linux相关命令及用法)

  • 拼多多商家版逾期发货会有什么处罚(拼多多商家版逾期发货了会不会有影响)

    拼多多商家版逾期发货会有什么处罚(拼多多商家版逾期发货了会不会有影响)

  • 爱奇艺会员电视和手机能一起用吗(爱奇艺会员电视能用吗)

    爱奇艺会员电视和手机能一起用吗(爱奇艺会员电视能用吗)

  • 电脑恢复出厂设置会怎么样(电脑恢复出厂设置有什么影响)

    电脑恢复出厂设置会怎么样(电脑恢复出厂设置有什么影响)

  • dns电脑服务器不可用是什么意思(dns电脑服务器不存在如何处理)

    dns电脑服务器不可用是什么意思(dns电脑服务器不存在如何处理)

  • 腾讯会议被踢了显示什么(腾讯会议被踢了进不去怎么办)

    腾讯会议被踢了显示什么(腾讯会议被踢了进不去怎么办)

  • 苹果x刘海屏红点闪烁(苹果刘海屏红灯一直在闪烁)

    苹果x刘海屏红点闪烁(苹果刘海屏红灯一直在闪烁)

  • 华为荣耀20pro如何删除拼多多(华为荣耀20PRO如果把手机的资料上传到电脑)

    华为荣耀20pro如何删除拼多多(华为荣耀20PRO如果把手机的资料上传到电脑)

  • qq加好友没有显示等待验证(qq加好友没有显示等待验证,对方能看见吗)

    qq加好友没有显示等待验证(qq加好友没有显示等待验证,对方能看见吗)

  • 小米10无线充电怎么充(小米10无线充电线圈)

    小米10无线充电怎么充(小米10无线充电线圈)

  • 腾讯课堂如何分屏(腾讯课堂如何分屏苹果)

    腾讯课堂如何分屏(腾讯课堂如何分屏苹果)

  • 抖音不登录可以搜索吗(抖音不登录可以看别人直播)

    抖音不登录可以搜索吗(抖音不登录可以看别人直播)

  • 苹果8电池健康度85%要换吗(苹果8电池健康78要换吗)

    苹果8电池健康度85%要换吗(苹果8电池健康78要换吗)

  • 电子相片怎么拍(电子照片要怎么拍)

    电子相片怎么拍(电子照片要怎么拍)

  • ipad4可以用pencil吗(ipad4可以用电容笔吗)

    ipad4可以用pencil吗(ipad4可以用电容笔吗)

  • 钉钉收藏后的东西在哪里看(钉钉收藏后的东西怎么转发到微信)

    钉钉收藏后的东西在哪里看(钉钉收藏后的东西怎么转发到微信)

  • pcdm00是什么型号手机(pcdm10是什么型号的手机)

    pcdm00是什么型号手机(pcdm10是什么型号的手机)

  • 苹果手机连接车载蓝牙微信没声音怎么回事(苹果手机连接车载蓝牙怎么连接)

    苹果手机连接车载蓝牙微信没声音怎么回事(苹果手机连接车载蓝牙怎么连接)

  • 手机let是啥(手机出现let)

    手机let是啥(手机出现let)

  • 苹果vc/a是哪个国家版本(苹果vca是哪个版本)

    苹果vc/a是哪个国家版本(苹果vca是哪个版本)

  • 黑莓手机怎么下载微信(黑莓手机怎么下歌)

    黑莓手机怎么下载微信(黑莓手机怎么下歌)

  • 怎么注销微信二维码收款(怎么注销微信二维码账号)

    怎么注销微信二维码收款(怎么注销微信二维码账号)

  • switch网速慢怎么办(switch 网速太慢)

    switch网速慢怎么办(switch 网速太慢)

  • 制作u盘dos启动盘教程(怎么用u盘启动dos)

    制作u盘dos启动盘教程(怎么用u盘启动dos)

  • BIOS设置图解教程(如何进入bios设置+bios设置u盘启动)(bios设置详细介绍配图)

    BIOS设置图解教程(如何进入bios设置+bios设置u盘启动)(bios设置详细介绍配图)

  • Win11电源高性能模式怎么开?Win11电源高性能模式设置方法(win11电源高性能模式代码)

    Win11电源高性能模式怎么开?Win11电源高性能模式设置方法(win11电源高性能模式代码)

  • dedecms织梦会员中心调用会员最后登录时间和IP(织梦收费5800的解决方法)

    dedecms织梦会员中心调用会员最后登录时间和IP(织梦收费5800的解决方法)

  • 个体户免税金额现在是多少
  • 管理费用怎么结转成本
  • 临时人员劳务费有哪些?
  • 利息支出可以抵扣吗
  • 筹建期间购买的机械配件
  • 股息红利增值税和企业所得税
  • 残疾人一次性奖金
  • 房地产企业开发产品转固定资产
  • 定额发票遗失情况说明怎么写
  • 商业零售企业实行增值税后购进商品业务的账务处理
  • 企业购买房产如何列入投资计划的
  • 其它应付款是否可以直接冲收入呢?
  • 企业取得财产转让收入确认时间
  • 期末调汇的会计科目
  • 事业单位收个人部分社保怎么入账
  • 上市公司发行股票可以自行销售吗
  • 结转报告中错误结转科目是什么意思
  • 不交社保的单位违法吗?
  • 金税三期的变化
  • 红冲发票地址不一样可以吗
  • 库存现金可以用于支付哪些钱
  • 资本溢价最后转入哪里
  • 资源税可能计入
  • 小规模销项负数发票怎么做账
  • win7系统怎么进
  • php计算时间
  • u盘无法格式化为NTFS
  • 股权转让合同怎么解除
  • bearshare.exe进程安全吗 bearshare是什么进程
  • php获取ftp文件目录
  • echarts右侧y轴
  • laravel 5.3中自定义加密服务的方案详解
  • 政府会计制度中固定资产报废的账务处理
  • 广告代理费制度
  • ai 绘画原理
  • move命令移动文件夹下所有文件
  • 待处理财产损溢在资产负债表中填哪里
  • 城镇土地使用税征收标准及计算方法
  • springboot怎么配置拦截器
  • Python解释器有哪些种类
  • Python psd-tools如何转换文件
  • 应收账款逾期无法偿还
  • 简易征收3%的征收率是什么意思
  • 资产负债表调整事项
  • 做模具怎么找客户
  • 建筑企业需要缴纳的税种
  • 充值优惠怎么写
  • 涉外收入申报单怎么填
  • 2023年职工养老保险缴费标准
  • 外币报表折算差额会计分录
  • 2019年新政府会计准则解读
  • sql基本教程
  • mySQL中in查询与exists查询的区别小结
  • mysql 5.7.33安装
  • windons10安装
  • sql取汉字
  • 通过注册表修改office默认字体
  • wp升级
  • KunlunPlatform.exe是什么进程?KunlunPlatform.exe是安全的程序吗?
  • autorun.inf在win10
  • 电脑重装win7系统黑屏
  • 写出10个linux系统操作命令和用法
  • SonicStageMonitoring.exe是什么进程 有什么作用
  • 如何解决win7系统卡顿
  • win7屏幕不停闪烁
  • windows批量添加文件后缀
  • Node.js中的事件循环是什么
  • 批处理获取本地连接名称
  • js动态生成html页面
  • cocos2dx:C++层通过JniHelper调用JAVA层代码进而调用Android手机应用接口
  • js水平垂直居中怎么设置
  • Cannot run program "/home/mohemi/Program/adt-bundle-linux-x86_64-20130729/sdk//tools/emulator": erro
  • 个人所得税其他公司在为我发放工资
  • 个人所得税赡养老人可以填两个吗
  • 城乡居民医疗保险和新农合的区别
  • 携程怎么订
  • 税控盘怎么申请领发票
  • 怎么看扣税明细
  • 异辛烷征收消费税对成品油影响
  • 普惠性税收优惠政策例子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设