chooseImage 这个API在小程序端并无太大的问题,相信看着文档各位小伙伴都能撸出来并和后台对接好,这篇文章只是为了解决h5端的问题:
h5端的chooseImage拿到的图片数据是以blob开头的数据格式,然而这并不是我们想要的,即便丢到后端也无法对接;因此我在网上找了很多解决这个问题的办法,然而并没有清晰的描述的,唯有看到一篇文章:
这篇文章为我解除疑惑,但是我想完善一点这篇文章,所以我就厚脸皮的把它转变为我的原创,哈哈哈!!!
废话不多说,上代码。。。
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格式
})
})
eader.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实现的。
好了,到此就结束了,如果上文有错误之处,请留言指明,感谢万分
如果此文对你有用请动动你的小手点个赞!谢谢!!!
网友评论