专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

当前位置：网站建设 > 技术支持

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

图片上传失败问题解决

图片上传 一定要记得修改合法域名，不然会失败，而且找不到报错信息哟！并且域名采用 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, unionId

       if (this.data.code == '') {

         this.setData({

           code: res.code

         })

         wx.request({

           url: 'https://wx.xxx.com/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: "https://wx.xxx.com/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, //缩略图arr

                 albumarr: bigpicarr, //原图相册arr

                 ziliaopicarrpost: 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.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html