美文网首页
Taro chooseImage和uploadFile兼容小程序

Taro chooseImage和uploadFile兼容小程序

作者: 前端_酒館 | 来源:发表于2019-12-09 16:14 被阅读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实现的。

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

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

    相关文章

      网友评论

          本文标题:Taro chooseImage和uploadFile兼容小程序

          本文链接:https://www.haomeiwen.com/subject/setigctx.html