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格式
    })
 })

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实现的。

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

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

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

推荐阅读更多精彩内容