Taro chooseImage和uploadFile兼容小程序

2019-12-09  本文已影响0人  前端_酒館

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

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

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

上一篇下一篇

猜你喜欢

热点阅读