位置: 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相关命令及用法)

  • 360云盘现在还能用吗(360云盘还能登录吗)

    360云盘现在还能用吗(360云盘还能登录吗)

  • 抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

    抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

  • 苹果微信面容支付怎么设置(苹果微信面容支付后怎么还要输入密码)

    苹果微信面容支付怎么设置(苹果微信面容支付后怎么还要输入密码)

  • 不能删除的图层是(不能删除的图层为)

    不能删除的图层是(不能删除的图层为)

  • airpods充电时几秒就灭了(airpods充电要多久)

    airpods充电时几秒就灭了(airpods充电要多久)

  • 符合email地址命名格式是什么(符合Email地址命名格式的是)

    符合email地址命名格式是什么(符合Email地址命名格式的是)

  • 超融合和虚拟化的区别(超融合和虚拟化哪个好)

    超融合和虚拟化的区别(超融合和虚拟化哪个好)

  • 爱奇艺会员怎么改密码(爱奇艺会员怎么让第二个人登录)

    爱奇艺会员怎么改密码(爱奇艺会员怎么让第二个人登录)

  • 微信视频要多少流量(微信视频要多少内存)

    微信视频要多少流量(微信视频要多少内存)

  • 手机屏幕松动了怎么办(手机屏幕松动了还可以用多久)

    手机屏幕松动了怎么办(手机屏幕松动了还可以用多久)

  • 蓝牙耳机降噪什么意思(蓝牙耳机降噪什么技术)

    蓝牙耳机降噪什么意思(蓝牙耳机降噪什么技术)

  • 小米6自动返回能解决吗(小米6自动返回怎么解决)

    小米6自动返回能解决吗(小米6自动返回怎么解决)

  • 淘宝锁单能锁多久(淘宝能锁单多久)

    淘宝锁单能锁多久(淘宝能锁单多久)

  • 人人影视tv版怎么安装

    人人影视tv版怎么安装

  • 京东删除自己评价记录(京东商城删除评价)

    京东删除自己评价记录(京东商城删除评价)

  • 华为自主研发的系统叫什么(华为自主研发的数据库与谁合作的)

    华为自主研发的系统叫什么(华为自主研发的数据库与谁合作的)

  • 手机怎么整体缩小图片尺寸(手机怎么整体缩小图片尺寸不裁剪)

    手机怎么整体缩小图片尺寸(手机怎么整体缩小图片尺寸不裁剪)

  • 换了手机抖音怎么恢复(换了手机抖音怎么找回来)

    换了手机抖音怎么恢复(换了手机抖音怎么找回来)

  • 拼多多上有扫一扫功能吗(拼多多有没有扫一扫)

    拼多多上有扫一扫功能吗(拼多多有没有扫一扫)

  • 手机后盖脱胶原因(后盖脱胶的手机的隐患)

    手机后盖脱胶原因(后盖脱胶的手机的隐患)

  • 世界上第一个计算机网络是(世界上第一个计算机病毒)

    世界上第一个计算机网络是(世界上第一个计算机病毒)

  • 小米旗舰机型有哪些(小米旗舰机型有哪些型号)

    小米旗舰机型有哪些(小米旗舰机型有哪些型号)

  • 荣耀8x使用技巧(荣耀8x使用技巧图解)

    荣耀8x使用技巧(荣耀8x使用技巧图解)

  • 如何保存小红书无水印(如何保存小红书动图)

    如何保存小红书无水印(如何保存小红书动图)

  • callkit是什么(call kit)

    callkit是什么(call kit)

  • java线程的三种结束方式(java线程的四种基本状态)

    java线程的三种结束方式(java线程的四种基本状态)

  • EventLoop(event loop exception null)

    EventLoop(event loop exception null)

  • 纳税怎么理解
  • 开电竞公司计划书
  • 有谁用过金蝶kis云专业版
  • 医院纯收入
  • 怎么查上个月交的社保
  • 行政事业单位会计制度
  • 工业企业提供劳务收入会计分录
  • 企业合并的被合并方会计分录
  • 分批收款收据怎么写
  • 超市顾客返利如何做账务处理?
  • 会计中应收账款的英文
  • 母子公司间资产划拨开免税发票
  • 商品非正常损耗收取的赔偿款账务处理怎么做?
  • 房地产活动礼品送什么比较吸引人
  • 资源税是否需要计提?
  • 开物流公司能挣多少钱
  • 取得专用发票不交增值税
  • 企业支付宝税务局能查吗怎么查
  • 购买股票的分录怎么写
  • 资本结构理论有哪些类型
  • 电子发票会计怎么记账
  • 定率征收怎么申报
  • 费用应计入管理费用的有
  • 预提成本的会计处理
  • 上个月做的无票收入,这个月开票怎样做分录
  • 福利费如何做会计分录
  • 收到汇算清缴退税账务处理
  • 分期摊销法计算公式
  • vue中使用echars
  • 矿业财务好做吗
  • 调整以前年度少计提的工资
  • vue3怎么样
  • 餐饮业开具增值税专用发票
  • php时间戳转换成时间
  • 没有计提坏账如何披露
  • 帝国cms安装教程
  • 其他应收款怎么核对
  • 企业给企业借款收入会计处理
  • 进项税额加计扣除5%账务处理
  • 利得都需要缴纳企业所得税吗
  • 长期待摊费用的最新账务处理
  • 税收分类口诀
  • 起重机属于固定资产中什么设备类型
  • 企业按行业划分可划分为哪些
  • sql server游标
  • 其他权益工具投资是什么意思
  • 商誉的会计核算怎么核算
  • 商品互换概念
  • 出口收入没有及时申报怎么处罚
  • 委托生产的会计分录
  • 房地产企业的会计核算
  • 退回的保证金多了一点怎么做分录
  • 企业相关成本费用有哪些
  • 提供劳务结转的成本计入什么科目
  • 收到所得税退税的账务处理
  • 哪些商业保险可以抵扣个税
  • 其他应付款贷方余额怎么冲平
  • 会计写数字的技巧和方法
  • 如何建立一个新的群
  • mysql分区表优劣分析
  • mysql工作内容
  • sql server随机数函数
  • win1 开机启动
  • 怎么把u盘两个盘合并到一起
  • 笔记本隐藏功能
  • windows10虚拟桌面
  • centos7文件路径
  • glht函数
  • 信号处理函数 strdup
  • js中document.write
  • 关于中秋节的古诗
  • find 批处理
  • 百度关键字搜索员是干嘛的
  • listview添加数据
  • javascript教程完整版
  • 如何将python中的列表与数据对齐
  • 卸载python后模块库还用卸载吗
  • 企业所得税税率10%
  • 佛山电子税务
  • 收到发票需要代签吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设