博客

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

图片上传失败问题解决

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