uniapp文件路径转base64格式
- 最近使用uni.canvasToTempFilePath ,需求:把返回文件路径转
base64
的格式,在H5平台下,tempFilePath 为base64
,这里处理微信小程序和app端。
微信小程序
pathToBase64WX(path, callback) {
uni.getFileSystemManager().readFile({
filePath: path, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => {
// 成功的回调
let base64 = 'data:image/jpeg;base64,' + res.data;
typeof callback == 'function' && callback(base64);
}
});
}
APP
getFileSystemManager
api不支持app平台, 通过5+resolveLocalFileSystemURL
api实现。
pathToBase64App(path) {
// 通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(evt) {
console.log('onload: ', evt.target.result);
}
fileReader.onerror = function(error) {
console.log('failed: ', error);
}
fileReader.readAsDataURL(file)
}, function(error) {
console.log('failed: ', error);
})
}, function(error) {
console.log('failed: ', error);
})
}
完整方法
微信小程序和5+APP使用的路径不支持网络路径,网络路径需要先使用下载API处理。
export function pathToBase64(path) {
return new Promise(function(resolve, reject) {
// app
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(evt) {
resolve(evt.target.result)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
// 微信小程序
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
使用
import { pathToBase64 } from './index.js'
pathToBase64(path).then( base64 => {
console.log('result 转换为base64:', base64);
}).catch(error => {
console.error(error)
})