uniapp框架中H5模式选择图片后Blob对象的使用

在uniapp框架中使用uni.chooseImage()时，发现在浏览器访问的情况下，res的数据结构如下，和在小程序访问下的结果不一样。

{
"errMsg":"chooseImage:ok",
"tempFilePaths":["blob:http://localhost:8080/53ff91e0-9730-4c89-95d7-1e294663d3aa"],
"tempFiles":[{}]
}

其中，tempFilePaths是一个表示图片文件路径的数组，tempFiles则是图片文件对应的Blob对象数组（虽然直接JSON.stringify(res)打印出来的是空对象，但是单独打印tempFiles[0].type或.size或.path或.name是有内容的）。

之所以在浏览器访问情况下，返回了这样的数据结构，是浏览器的一种对用户电脑本地文件系统的保护机制。

另外，这个Blob对象的内容当前是保存在内存中的，随时可能被清除，所以虽然tempFilePaths[0]直接赋值给src可以显示，但是不建议。

这时候，可以使用FileReader对象的readAsDataURL方法和它的回调函数来转换获取图片文件的内容并保存到其它非内存的位置上（如浏览器的本地存储）。

uni.chooseImage({
	count:1,
	sourceType:['album','camera'],
	success(res) {
		let reader = new FileReader();
		reader.onload = function(){
			let dataURL = reader.result;
			uni.setStorageSync(res.tempFiles[0].path,dataURL);
		}
		reader.readAsDataURL(res.tempFiles[0]);
	},
	fail(error) {}
});

其中，dataURL是图片文件的Base64内容（也可直接赋值给src），例如：

data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/.......wHzUH//Z

如果要实现下载，可通过创建a标签，并使用它的click方法。

uni.chooseImage({
	count:1,
	sourceType:['album','camera'],
	success(res) {
		const link = document.createElement('a');
      	link.href = res.tempFilePaths[0];
     	link.download = res.tempFiles[0].name;
     	link.click();
	},
	fail(error) {}
}