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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 230,048评论 6 542
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,414评论 3 429
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 178,169评论 0 383
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,722评论 1 317
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,465评论 6 412
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,823评论 1 328
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,813评论 3 446
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 43,000评论 0 290
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,554评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,295评论 3 358
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,513评论 1 374
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 39,035评论 5 363
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,722评论 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 35,125评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,430评论 1 295
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,237评论 3 398
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,482评论 2 379

推荐阅读更多精彩内容

  • 去年有段时间得空,就把谷歌GAE的API权威指南看了一遍,收获颇丰,特别是在自己几乎独立开发了公司的云数据中心之后...
    骑单车的勋爵阅读 20,636评论 0 41
  • 文件操作一直是早期浏览器的痛点,全封闭式的不给JavaScript操作的空间。随着H5新接口的推出这个壁垒被打破了...
    JunChow520阅读 1,502评论 0 2
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,851评论 0 15
  • simplify the life HTML5 File API — 让前端操作文件变的可能 前言 在 HTML5...
    我是强强阅读 3,343评论 0 1
  • 前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现。出于安...
    D_R_M阅读 2,288评论 0 2