js获取APP缓存图片并上传文件服务器

使用场景

我司最近有这个一个需求，在客户录入用户信息的时候希望通过扫描证件获取用户信息并自动填充在input框了，除此之外会把证件进行截图，截图保存在APP的内部缓存里，然后做一个隐形的图片上传，也就是截图，保存图片，获取图片并上传，这一系了动作全由代码实现，在客户眼里是没有用户上传图片的，但是我们的系统需求确实需要的。那么就要想办法把这个图片传递到文件服务器上。

扫描证件以及截图是通过使用cordova插件实现的，前端js可以通过调用cordova获取到截图的存放路径。

APP 使用的cordova打包，

前端使用vue-cli

初始想法

最初的想法是根据cordova返回的截图路径，直接放置在 img标签的src里  然后通过canvas把img图片在画出来然后使用canvas.toDataURL("images/png",1.0)进行转化，接下来转化成base64，在转化成blob文件，到此就基本成功了，然后把blob文件放在formData里面作为从参数上传到文件服务器。

具体实现可参考：https://blog.csdn.net/happyelina/article/details/53556260

但是这种方式在Android系统下没有问题，但是在iOS下cordova返回的图片路径我无论是怎样放入到img标签了img图片都是不加载的，那么就没有办法使用canvas进行图片转化，所以只能摒弃这种方式，后来经过多方查询得知可以是用cordova-plugin-file这个插件访问文件系统，然后对此插件一通研究终于得偿所愿实现了Android和iOS的下图片的获取与上传。

最终实现

/*
 * android和ios文件系统目录不同  路径不同
 */
let card_img = "/var/../../../Documents/card.png" //ios
let card_img_android = "/sdcard/../../card.png"  //android

readLocalFile() {
   let that = this
   let img	
			                  
   window.resolveLocalFileSystemURL(cordova.file.applicationStorageDirectory,function(root){
    // cordova.file.applicationStorageDirectory
    // 访问APP内部缓存文件
    //

	if(!that.$store.state.isIos){//是否是iOS
		img = card_img_android
	}else{
		img = 'Documents/card.png'
	}
	root.getFile(img, {create:false}, function(fileEntry) {
		fileEntry.file(function(file) {
			console.log("file----->",file);
			var readerFile = new FileReader();
			readerFile.onloadend = function (e) {
                        //读取文件完成后，得到转换为二进制的文件然后转换成blob文件
				 var blob = new Blob([new Uint8Array(readerFile.result)], { type: 'image/png' });
				 console.info("blob-----<",blob);
				 that.imgUpload(blob) //调取文件上传接口
			}
				readerFile.readAsArrayBuffer(file)
			}, function(err){console.log('读取出错',err);});
		}, function(err){console.log('找不到文件',err);});
	},function(err){});
},

this.readLocalFile()

 

参考资料：https://blog.csdn.net/u011127019/article/details/57084310