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

  • 委托加工应税消费品收回后直接销售
  • 跨区域开票流程怎么走
  • 医疗保险单位和个人交的区别
  • 公务员抚恤费
  • 小规模的开专票怎么征税
  • 新公司成立后税务方面要做的事情有哪些
  • 收回次月作废的发票需要做账吗
  • 每股收益无差别点公式
  • 接受土地使用权作为投资属于什么凭证
  • 核定征收企业有利润如何注销税务登记
  • 以股权入股要交税吗?
  • 住宿费发票可以抵扣进项税吗
  • 员工租房合同
  • 冲销去年暂估费用
  • 股票转让所得不交增值税
  • 船舶吨税范围
  • 营改增各项业务销售额按照什么确定
  • 行政单位举办活动能发奖奖金吗
  • 厦门年收入30万人数
  • 营业执照印花税税率
  • 申报状态显示申报失败
  • 企业所得税国税还是地税征管
  • 所得税 费用
  • 股权转让印花税税率
  • 个体户可以申请公章吗
  • 增值税季度报税
  • 结转实物发放的成本分录
  • 企业加入的协会有哪些
  • 工程安装人工外包合同怎么写
  • 华为鸿蒙系统开发平台
  • 代扣代缴税款的完税凭证抵扣期限
  • php如何防止表单重复提交
  • php中substr_replace
  • 如何把文档转换成二维码
  • 所有者权益变动额怎么算
  • php数组函数题目
  • php冒泡法排序
  • 收到现金股利会引起什么变化
  • zmweb.exe是什么进程
  • php零基础教程
  • PHP:zip_entry_name()的用法_Zip函数
  • 集团公司对子公司如何进行资金管理
  • laravel引入css
  • php消息队列kafka
  • 制造企业的印花税税率
  • 采用公允价值模式计量的投资性房地产处置
  • 劳务费发票差额征税
  • php类的作用
  • 专用发票有几联?
  • 若依idea
  • 农民专业合作社是企业法人吗
  • 新成立的公司做广告如何写公司简介部分
  • python监控模块
  • sql2008附加数据库错误3456
  • 收货和入库的区别
  • 白酒消费税最低计税价格核定范围包括
  • 收据作为原始凭证的依据
  • 折旧费用分摊科目是什么
  • 公司费用怎么做账
  • 销售货物海运费会计分录
  • 外汇账户具体包括哪些
  • mysql mod
  • 从几个方面论述
  • ubuntu20.04安装配置
  • 苹果手机
  • win10 20h2 v2
  • 标记不能
  • win7系统笔记本怎么调节电脑亮度
  • 微软股票
  • react-native-modal
  • ant编译工具
  • javascript基于
  • jquery从左到右渐渐显示
  • python3.9爬取网页教程
  • 普通话的对话
  • python 电话号码
  • 税控盘反写后才能开票吗
  • 慧付钱包app官网下载
  • 苹果官网手机号码无效
  • 酒精税收分类编码查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设