uniapp文件路径转base64格式

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实现。

resolveLocalFileSystemURL

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)
})