1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 微信小程序之图片上传 多图上传 头像上传 头像获取 图片上传失败问题解决

微信小程序之图片上传 多图上传 头像上传 头像获取 图片上传失败问题解决

时间:2021-11-27 03:35:17

相关推荐

微信小程序之图片上传 多图上传 头像上传 头像获取 图片上传失败问题解决

小程序用户授权获取用户头像,需点击才可以让用户选择是否授权。

图片上传失败问题解决

图片上传 一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https

点击,用户授权,获取用户头像,上传服务器:

<button class="getuserinfo" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>

onGotUserInfo: function (e) {// console.log(e)// console.log(e.detail.userInfo)// console.log(e.detail.rawData)// this.setData({// usertximg: e.detail.userInfo.avatarUrl// })wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdif (this.data.code == '') {this.setData({code: res.code})wx.request({url: '/wechat/setWxImg',data: {encryptedData: e.detail.encryptedData,iv: e.detail.iv,code: this.data.code,wx_img: e.detail.userInfo.avatarUrl},method: "post",success: (res) => {console.log(res);if (res.data.message == "ok") {wx.setStorageSync('openid', res.data.data.openid);getApp().globalData.openid = wx.getStorageSync('openid');this.setData({isdenglu: false,openid: res.data.data.openid})this.getbrowercard();} else {wx.showToast({title: "授权出错,请重新授权!",icon: "none",duration: "2000"})}// this.getcardinfo();}})}}})},

用户上传图片:

chuantx: function () {wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {// tempFilePath可以作为img标签的src属性显示图片// console.log(res.tempFilePaths);// wx.showModal({// title: res.tempFilePaths[0]// })// console.log(encodeURI(res.tempFilePaths[0]));// console.log(res.tempFilePaths[0]);wx.uploadFile({url: "/wechat/upload",filePath: res.tempFilePaths[0],file: res.tempFilePaths[0],name: 'file',formData: {app: 3,type: 2,},success: (res) => {// console.log(res);let updata = JSON.parse(res.data);// console.log(updata);if (updata.message == 'ok!') {this.setData({tximg: updata.data.url})}}})}})},

多张图片上传:

效果图:

ziliaobtn: function () {wx.chooseImage({count: 9,sizeType: ['original'],sourceType: ['album', 'camera'],success: (res) => {console.log(res);let piclen = res.tempFilePaths.length;for (let i = 0; i < piclen; i++) {wx.uploadFile({url: myUrl.mainUrl + "/upload",filePath: res.tempFilePaths[i],file: res.tempFilePaths[i],name: 'file',token: this.data.token,formData: {app: 3,type: 3,},success: (res) => {console.log(res);let updata = JSON.parse(res.data);// console.log(updata);if (updata.message == 'ok!') {wx.showToast({title: '上传中...',mask: true,icon: 'loading',})let pic = updata.data.img_path.thumb; //缩略图let arr = this.data.ziliaopicarr;arr.push(pic);// wx.showToast({// title: pic// })let bigpic = updata.data.url; //原图let bigpicarr = this.data.albumarr; //原图相册bigpicarr.push(bigpic);let picpost = updata.data.img_path.url; //post图let arrpost = this.data.ziliaopicarrpost;arrpost.push(picpost);this.setData({ziliaopicarr: arr, //缩略图arralbumarr: bigpicarr, //原图相册arrziliaopicarrpost: arrpost //post图arr})// console.log(this.data.ziliaopicarr);} else {wx.showToast({title: 'no!',icon: 'none'})}},fail: (res) => {// console.log(url);// console.log(filePath);wx.showToast({title: '系统出错,请重试!',icon: 'none'})}})}}})},

html:

<view class="kehuziliao"><view class="ziliaotit">上传客户身份证件、征信报告等文件</view><view class="ziliaobox"><image src="{{item}}" webp="{{true}}"wx:for="{{ziliaopicarr}}" wx:if="{{ziliaopicarr}}" wx:key="item" class="ziliaopic" mode="aspectFill"data-index="{{index}}"bindtap="addloupantanbtn" /><view class="ziliaobtn ziliaopic" bindtap="ziliaobtn"><image src="../../images/kehuxitong/uppic.png" class="ziliaoicon" mode="widthFix" /></view></view></view>

css:(less):

.kehuziliao{position: relative;width: 100%;.ziliaotit{font-size: 24rpx;color: #888;line-height: 40rpx;}.ziliaobox{position: relative;width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;.ziliaopic{position: relative;width: 170rpx;height: 160rpx;margin:20rpx 30rpx 30rpx 0;overflow: hidden;}.ziliaobtn{background: #f8f8f8;.ziliaoicon{width: 62rpx;height: 62rpx;overflow: hidden;display: block;margin:48rpx auto 0;}}}}

小程序官方:

https://developers./miniprogram/dev/api/network/upload/wx.uploadFile.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。