前端使用微信sdk上传图片的坑，及万千种方法比较实用的一种，亲测有效

vue 公众端使用微信sdk上传图片大坑

第一个坑
第二个坑

第一个坑

使用微信sdk拿到的图片并没有base64的前缀所以我们需要自己加

 iSrc = 'data:image/jpeg;base64,' + bs64.replace(/\r|\n/g, '');

第二个坑

ok继上一步结束后，我们拿到正常的base64的url后，我们上传还不行，对没错，就是还不行，因为一般的图片的大小都太大了，我们需要进行二进制的压缩，就给他转成 0101000111100000 emmmm…转完就差不多就这样吧…猜测。我们还是看代码吧。

完全可以直接复制，通过调用这个方法把你的base64 url放进去

//完全可以直接复制，通过调用这个方法把你的base64 url放进去
dataURItoBlob(dataURI) {// convert base64/URLEncoded data component to raw binary data held in a stringlet byteString;if (dataURI.split(',')[0].indexOf('base64') >= 0) {byteString = atob(dataURI.split(',')[1]);} else byteString = unescape(dataURI.split(',')[1]);// separate out the mime componentconst mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];// write the bytes of the string to a typed arrayconst ia = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},

ok…目前这两个坑是最致命的。因为第一次接触微信sdk的话不会想到这些，因为毕竟文档写的不是那么直白，很抽象的。。。。应该也算是反程序猿。哎，不多废话了，就这么多吧，到点了，该搬砖了。
附上整体代码，仅供参考
H5部分：

<div class="head_img" slot="left"><img v-show="this.localIds" :src="this.localIds" alt /><img src="../../assets/0263117686f629dab4b871d67688585.png" v-show="!this.localIds"/>
</div><div slot="default"><div class="setting_right" @click.stop="update"><div class="caption">更改头像</div></div>
</div>

JS部分：

update(e) {let _this = this;let param = new FormData();wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {_this.localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片\wx.getLocalImgData({localId: res.localIds[0], // 图片的localIDsuccess: function(ress) {let bs64 = ress.localData; //  localData是图片的base64数据，可以用img标签显示// 去掉所以换行符_this.localData = 'data:image/jpeg;base64,' + bs64.replace(/\r|\n/g, '');console.log(_this.dataURItoBlob(_this.localData));param.append('file', _this.dataURItoBlob(_this.localData));_this.$http.put('/api/user_info', param).then(response => {console.log(response.data);});}});}});},dataURItoBlob(dataURI) {// convert base64/URLEncoded data component to raw binary data held in a stringlet byteString;if (dataURI.split(',')[0].indexOf('base64') >= 0) {byteString = atob(dataURI.split(',')[1]);} else byteString = unescape(dataURI.split(',')[1]);// separate out the mime componentconst mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];// write the bytes of the string to a typed arrayconst ia = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},

css部分：

想啥呢... css也要吗？。。。。快，该搬砖了。。。。

各位大佬们，如果小弟那个地方说的不对，还请耽误您1~5秒时间教育一下小弟，毕竟批评会让人进步，对吧…

前端使用微信sdk上传图片的坑，及万千种方法比较实用的一种，亲测有效相关推荐

微信怎么建群？三种方法，总有一种适合你！
微信怎么建群?说起我们常用的社交软件,微信可以说是使用人群最广泛的.很多人都拥有自己的微信账号,微信支持语音.视频聊天,除了和好友的私聊以外,我们还可以在微信中进行多人群聊. 今天小编就给大家分享一下 ...
如何让微信朋友圈中内容消失？其实有4种方法，你知道几种呢？
作为一个微信用户,刷朋友圈可以说是最基本的操作了,朋友圈可以分享身边发生的各种事情,传递各种信息. 但是很多时候你也会在朋友圈中看见许多广告,尤其是微商朋友多的情况下,那么怎样让朋友圈的内容消失在你的 ...
调用微信JS-SDK上传图片爬坑之路
最近最用 vue 开发微信服务号 ,也是第一次调用微信的sdk , ( 先吐槽下自己断断续续的整理一个星期才搞出来 ) 日了狗了 ,坑太多 , 更多是 ios 不兼容 ,图片不显示呀 , 不能上传多 ...
前端控制微信分享到群，朋友圈的方法，js禁止微信分享亲测可用
直接上代码,下面代码都是开发过程中记录的怕丢了,就在这备个份,使用过程中有问题可以私信或者联系微信:wxid_7yiygpz72wk622 另也承接小程序,网站开发,H5开发,程序二次开发,APP开发 ...
微信小程序使用真机或开发工具进行http请求开发测试亲测有效
微信小程序使用真机或开发工具进行http请求开发测试 1使用微信开发这工具进行http请求的配置 2:真机进行http请求微信开发这平台要求上线微信小程序配置的合法域以及网络请求名必须是https, ...
微信小程序用户自动检测最新版本并更新2020年最新版亲测
微信小程序新版本发布之后,用户使用依然是旧版本,这是因为在微信中有旧版本的缓存,不会及时更新到新版本.要想让用户更新到新版本,可以通过提示用户在微信中的"发现 - 小程序"入口中将 ...
微信百度网盘小程序怎么转存到百度网盘App（亲测可用）
微信百度网盘小程序怎么转存到百度网盘App? 原因: 不想把微信和网盘绑定在一起. 解决办法: 扫码进百度网盘小程序后,点击左上角"回到首页",在"我"中点&q ...
微信通知设置全开仍然需要打开界面才有消息提醒？亲测神奇偏方，还原所有设置前必须试一试的方法
背景过年回家,老人说手机微信有消息不提醒了.试过了很多方法,不管是设置通知开启,提高微信权限,打开网上一系列方法中的设置,包括比较偏方的电池优化中的允许后台运行都没有效果. 线索(症状) 发现有时进 ...
完美解决deepin-wine-wechat微信黑块以及聊天输入框中文字体显示为竖条的问题（亲测有效！）
一. 解决显示微信黑块的问题 1. 安装wmctrl sudo apt-get install wmctrl 2. 使用wmctrl命令查看系统正在运行的窗口打开微信聊天窗口后会有黑块显示,此时如下 ...

前端使用微信sdk上传图片的坑，及万千种方法比较实用的一种，亲测有效

vue 公众端使用微信sdk上传图片大坑

第一个坑

第二个坑

前端使用微信sdk上传图片的坑，及万千种方法比较实用的一种，亲测有效相关推荐

最新文章

热门文章