這一篇主要說頭像 上傳，以及修改保存的功能。本章節主要用的知識點有

1. wx.chooseImage 從本地相冊選擇圖片或使用相機拍照。

2.wx.uploadFile 將本地資源上傳到服務器.

3. 修改原來的小程序頭像並保存，調用後臺接口修改操作

第一步：我們要獲取本地圖片，官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject

我這裏也貼出來了，不夠詳細可以去官網看。

1、選擇圖片接口

wx.chooseImage(OBJECT) 從本地相冊選擇圖片或使用相機拍照。

OBJECT參數說明：

‘

success返回參數說明：

我這裏先貼官方是例子出來。

wx.chooseImage({
  count: 1, // 默認9
  sizeType: [‘original‘, ‘compressed‘], // 可以指定是原圖還是壓縮圖，默認二者都有
  sourceType: [‘album‘, ‘camera‘], // 可以指定來源是相冊還是相機，默認二者都有
  success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

第二步：

2、上傳圖片接口 wx.uploadFile(OBJECT)

將本地資源上傳到開發者服務器。我們通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑後，可通過此接口將本地資源上傳到指定服務器。客戶端發起一個 HTTPS POST 請求，其中content-type 為multipart/form-data 。

OBJECT參數說明：

success返回參數說明：

官方實例代碼：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: ‘https://example.weixin.qq.com/upload‘, //僅為示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: ‘file‘,
      formData:{
        ‘user‘: ‘test‘
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

是否看到這裏對選擇圖片和上傳的接口了解很多，

第三步：代碼實現

接下來這裏就是真正的操作代碼，為了大家方便看，我這裏都註釋了代碼：

沒修改之前。 修改後並保存數據庫

這裏的樣式自已調

<view class="my-item" style=‘height:60px;line-height:60px;margin-top:10px‘ bindtap="changeAvatar"> 
  <text>頭像</text>
  <view class="language">
  <image  class="userinfo-avatar" src="{{user.avatar}}" background-size="cover"></image> 
</view>

js模塊，

註意：

wx.uploadFile自已有一個this，我們格外定義的var _this = this 到時候賦值的時候把this帶進來就OK了。

 //點擊圖片選擇手機相冊或者電腦本地圖片
  changeAvatar: function(e) {
    var _this = this　　
    wx.chooseImage({
      count: 1,// 默認9
      sizeType: [‘original‘, ‘compressed‘],// 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: [‘album‘, ‘camera‘],// 可以指定來源是相冊還是相機，默認二者都有
      success: function(res) {
         // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        //這裏是上傳操作
        wx.uploadFile({
          url: getApp().globalData.clientUrl + ‘/uploadAvatarUrl‘, //裏面填寫你的上傳圖片服務器API接口的路徑 
          filePath: tempFilePaths[0],//要上傳文件資源的路徑 String類型 
          name: ‘avatar‘,//按個人情況修改，文件對應的 key,開發者在服務器端通過這個 key 可以獲取到文件二進制內容，(後臺接口規定的關於圖片的請求參數)
          header: {
            "Content-Type": "multipart/form-data"//記得設置
          },
          formData: {
               //和服務器約定的token, 一般也可以放在header中
            ‘session_token‘: wx.getStorageSync(‘session_token‘)
          },
          success: function(res) {
            //當調用uploadFile成功之後，再次調用後臺修改的操作，這樣才真正做了修改頭像
            if (res.statusCode = 200) {
              // var data = res.data
              // var statusCode = res.statusCode
              // console.log("返回值1" + data);
              // console.log("返回值2" + statusCode)
              //這裏調用後臺的修改操作， tempFilePaths[0],是上面uploadFile上傳成功，然後賦值到修改這裏。
              wx.request({
                url: getApp().globalData.clientUrl + ‘/update?avatar=‘ + tempFilePaths[0], //真正修改操作,填寫你們修改的API
                header: {
                  ‘content-type‘: ‘application/json‘, 
                },
                method: ‘POST‘,
                success: function(res) {
                  if (res.data.code == 200) {
                    wx.showToast({
                      title: ‘修改成功‘,
                      icon: ‘success‘,
                      duration: 2500
                    })

                    //wx.uploadFile自已有一個this，我們剛才上面定義的var _this = this 把this帶進來
                    _this.setData({
                      "user.avatar": tempFilePaths[0]
                    });
                  }
                },
              })
            }
          }
        })
      }
    })
  },

這樣就實現了修改小程序的頭像了，希望幫到正在奮鬥的你，遇見更好的你。

這篇文章哪裏還不足的話，希望路過的大神指點指點小弟。

微信小程序上傳圖片到服務器實例