uniapp可通过此方法对本地路径 如: …/…/static/img/01.png 或者网络路径图片转为base64
urlTobase64(url) {
var toBase64Url;
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success: async res => {
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符,在页面无法显示
console.log(toBase64Url)
}
});
},
这时如果需上传该文件 要看你们后台是如何接收的 如果后台接收的base64 则直接传base64。
然而我在用uniapp开发app遇到的是,我在浏览器中调试可以直接上传base64形式 ,在真机调试或者打包之后 直接找不到本地路径的图片了 或者是传base64直接报500错误,后来处理这个问题 使用了官方文档的一个压缩图片接口的api
uni.compressImage({
src: '/static/logo.jpg',
quality: 100,
success: res => {
console.log(res.tempFilePath)
}
})
通过uni.compressImage 拿到一个本地路径res.tempFilePath 上传本地路径就Ok啦
/该接口的官方文档如下**/
uni.compressImage(OBJECT)
压缩图片接口,可选压缩质量
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
---|---|---|---|---|---|
1.9.7+ 自定义组件编译模式 | x | √ | √ | √(基础库版本>=3.110.3) | √ |
OBJECT 参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
src | String | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 | |
quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
属性 | 类型 | 说明 |
---|---|---|
tempFilePath | String | 压缩后图片的临时文件路径 |