Taro chooseImage和uploadFile兼容小程序和h5端

chooseImage 这个API在小程序端并无太大的问题,相信看着文档各位小伙伴都能撸出来并和后台对接好,这篇文章只是为了解决h5端的问题:
h5端的chooseImage拿到的图片数据是以blob开头的数据格式,然而这并不是我们想要的,即便丢到后端也无法对接;因此我在网上找了很多解决这个问题的办法,然而并没有清晰的描述的,唯有看到一篇文章:

https://blog.csdn.net/SNC8F/article/details/102893733

这篇文章为我解除疑惑,但是我想完善一点这篇文章,所以我就厚脸皮的把它转变为我的原创,哈哈哈!!!

废话不多说,上代码。。。

 Taro.chooseImage({count:  9}).then(res => {
		console.log(res)  //这里我们拿到的是blob格式的图片数据,但这不是真正的blob格式数据,我们需要将数据fetch一下

	fetch(res.tempFilePaths[0]).then(fetchRes => {
		return fetchRes.blob();
	}).then(data => {
		let reader = new FileReader();
        reader.onloadend = () => {
           tempFilePaths[i] = reader.result; //这里得到base64的图片格式
         };
        reader.readAsDataURL(data); //base64的图片格式是通过这个方法去得到的,如果传入的不是真正的blob格式的数据进去会报错的,所以要特别注意传入的格式是否blob格式
	})
 })

reader.readAsDataURL(data); //base64的图片格式是通过这个方法去得到的,如果传入的不是真正的blob格式的数据进去会报错的,所以要特别注意传入的格式是否blob格式

到了这里大部分人应该就没问题了,前提是后端愿意接受base64的数据格式,然而base64数据格式和小程序获取到的http格式是完全不一样的,如果你的后端不愿意做兼容,那么h5端还是没法继续跑下去,要如何将blob转为http格式,目前我也还在探索中,希望有知道的小伙伴可以留言告知一下,让我把这部分补充完整,到了这里这篇文章基本就结束了, 但是为了文章的完整性,我决定还是补上 转blob的API,不多就几句代码而已:

fetch(res.tempFilePaths[0]).then(fetchRes => {
	return fetchRes.blob();
}).then(data => {
	let reader = new FileReader();
    reader.onloadend = () => {
	   tempFilePaths[i] = reader.result;
	  //兼容:mozilla(firefox)||webkit or chrome
	   letwindowURL = window.URL || window.webkitURL;
	   //createObjectURL创建一个指向该参数对象(图片)的URL
	    let dataURL = windowURL.createObjectURL(data);
     };
     reader.readAsDataURL(data)
})

这段代码是blob转base64后再重新转回blob,而实现这个功能是由window.URL.createObjectURL()这个API实现的。

好了,到此就结束了,如果上文有错误之处,请留言指明,感谢万分

如果此文对你有用请动动你的小手点个赞!谢谢!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值