uni-app图片选择转base64问题，H5与APP端相关实现

前言

本文章是基于uni-app的uView去实现的。

<u-upload ref="uUpload"  :max-size="5 * 1024 * 1024" action="/"max-count="1":before-upload="beforeUpload"></u-upload>

H5

beforeUpload(index, list) {      return new Promise((resolve, reject) => {// list[0].file.path 就是图片的路径this.$pathToBase64(list[0].file.path).then(res => {//一些逻辑操作// res就是base64字符串resolve()}).catch(e => {console.log(e)})}).catch(e => {reject(e)})return false
},
// 在main.js文件当中
//图片转base64
Vue.prototype.$pathToBase64 = (url) =>{return new Promise((reslove,reject) => {uni.request({url: url,method:'GET',responseType:'arraybuffer',success: ress => {let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦reslove(base64)},fail: (e) => {reject("图片转换失败");}})})
}

APP端

在App端当中，以上的list[0].file.path 就是图片的路径会变成file://的本地绝对路径。我们通过plus.io的相关Api去操作。

beforeUpload(index, list) {      const reader = new plus.io.FileReader();// list[0].file.path 为file:// ....plus.io.resolveLocalFileSystemURL( list[0].file.path, entry => {entry.file(file => {reader.onloadend = e => {//一些逻辑操作// e.target.result就是base64字符串};reader.readAsDataURL(file);}, function ( e ) {console.log( e.message );} );}, e => {console.log(e)} );return false
},

uni-app图片选择转base64问题，H5与APP端相关实现相关推荐

uni-app APP,H5图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
项目场景: 提示:这里简述项目相关背景: uni-app上传图片添加文字水印功能时图片只显示左上角,或者图片重叠图片不规则一系列bug,特此记录问题描述提示:这里描述项目中遇到的问题: 上传图片 ...
App图片上传Base64图片上传
/*** @Method base64图片上传* @author Angus* return array* date 2018-05-04*/ function saveBase64Image($ba ...
python爬取app图片_利用python爬取斗鱼app中照片方法实例
前言没想到python是如此强大,令人着迷,以前看见图片总是一张一张复制粘贴,现在好了,学会python就可以用程序将一张张图片,保存下来. 最近看到斗鱼里的照片都不错,决定用最新学习的python ...
Android系统（74）--- 从零实现灵活且可高度定制的Android图片选择架构
从零实现灵活且可高度定制的Android图片选择架构 https://www.jianshu.com/u/df76f81fe3ff 前言这是我花费了数月闲暇时间从零开始写的一个库,在这期间,我学习到 ...
uniapp h5、app引用外部在线js
uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...
餐厅预订APP多少钱一套？餐厅预订APP如何收费？
餐饮店开通餐馆预订APP,不仅可以提升就餐感受,也可以很大省下员工的工作压力,提升效率.并结合预订成功通知.到期前通知等功能,确保顾客能按时就餐.那餐饮店如何快速.低成本的建立自己的餐馆预订APP,今 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
【微信小程序】图片选择、转码、压缩、预览、上传，file与base64
0 前言微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
H5唤起APP进行分享的尝试
H5唤起APP进行分享最近很久没有写blog和note,倒是过家家的开发日志简单草草写了一点.这次记录下这个学习过程由来我们的 "通达有你",web h5页面的分享功能体验太 ...

uni-app图片选择转base64问题，H5与APP端相关实现

前言

H5

APP端

uni-app图片选择转base64问题，H5与APP端相关实现相关推荐

最新文章

热门文章