h5+ 读取本地图片文件，转为file对象
使用场景
依次读取照片的路径，输入路径字符串，得到文件对象；全程同步顺序操作；
手机图片文件详情中路径：内部存储/Pictures/IMG_1589761748105.jpg
程序中获取的路径：file:///storage/emulated/0/Pictures/IMG_1589761748105.jpg
代码片段
- 依次处理图片文件，同步操作
class imgFileToFileObj{
constructor(){
}
//利用H5的IO方法 参考 官网地址 https://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileReader
getFileFromHIO(fileAllPath){
var promise=new Promise(function(resolve,reject){
plus.io.resolveLocalFileSystemURL(
fileAllPath,
function( entry ) {
// 可通过entry对象操作test.html文件
entry.file( function(file){
var fileReader = new plus.io.FileReader();
console.log("getFile:" + JSON.stringify(file));
fileReader.readAsDataURL(file);//以BASE64编码格式读取文件
fileReader.onloadend = function(evt) {
// console.log("evt.target" + evt.target);
// console.log("evt.target.result len = " +evt.target.result.length);
// console.log("evt.target.result = " +evt.target.result);
//base64编码格式转file格式
var aa = evt.target.result;
var arr = aa.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var fileResult = new File([u8arr], "filename.jpg", { type: mime });
console.log(fileResult);
resolve(fileResult);
}
} );
},
function ( e ) {
console.log( "Resolve file URL failed: " + e.message );
reject(e)
}
);
})
return promise;
}
//利用Image对象
getCodeFromImg(fileAllPath){
var promise=new Promise(function(resolve,reject){
var imga = new Image();
imga.src=fileAllPath;
imga.onload=function(){
var canvas = document.createElement("canvas");
canvas.width = imga.width;
canvas.height = imga.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(imga, 0, 0, imga.width, imga.height);
var dataURL = canvas.toDataURL("image/png");
var arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
console.log(new File([u8arr], "mid_shot.jpg", { type: mime }));
resolve(new File([u8arr], "mid_shot.jpg", { type: mime }));
}
imga.onerror=function(){
reject('error，图片文件转file失败')
}
});
return promise;
}
async doChange(imgFileStrList) {
var FileList = new Array();
for(var i=0;i<imgFileStrList.length;i++){
const time2 = await this.getFileFromHIO(imgFileStrList[i]);
//const time2 = await this.getCodeFromImg(imgFileStrList[i]);
console.log(time2);
FileList.push(time2);
}
console.log(FileList);
return FileList;
}
}
2. 同步操作，调用函数
submit: function (){
var box=new imgFileToFileObj();
var fileAllPath = 'file:///storage/emulated/0/Pictures/IMG_1589761748105.jpg';
var imgFileStrList = new Array();
imgFileStrList.push(fileAllPath);
imgFileStrList.push(fileAllPath);
imgFileStrList.push(fileAllPath);
(async () => {
var fileArrayOne= await box.doChange(imgFileStrList);
console.log(' 我应该是最后的最后 fileArray = '+fileArrayOne)
})()
}
## 涉及技术点：
1. async/await 可以嵌套使用；
2. H5+ API的使用；