微信小程序上傳圖片

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

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

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

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

 第一步：咱們要獲取本地圖片，官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

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

一、選擇圖片接口

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

OBJECT參數說明：

參數	類型	必填	說明
count	Number	否	最多能夠選擇的圖片張數，默認9
sizeType	StringArray	否	original 原圖，compressed 壓縮圖，默認兩者都有
sourceType	StringArray	否	album 從相冊選圖，camera 使用相機，默認兩者都有
success	Function	是	成功則返回圖片的本地文件路徑列表 tempFilePaths
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

 

 

 

 

 

 

 

success返回參數說明：

參數	類型	說明	最低版本
tempFilePaths	StringArray	圖片的本地文件路徑列表
tempFiles	ObjectArray	圖片的本地文件列表，每一項是一個 File 對象	1.2.0

 

 

 

 

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

 

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

View Code

第二步：

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

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

OBJECT參數說明：

參數	類型	必填	說明
url	String	是	開發者服務器 url
filePath	String	是	要上傳文件資源的路徑
name	String	是	文件對應的 key , 開發者在服務器端經過這個 key 能夠獲取到文件二進制內容
header	Object	否	HTTP 請求 Header, header 中不能設置 Referer
formData	Object	否	HTTP 請求中其餘額外的 form data
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

 

 

 

 

 

 

 

 

 

 

success返回參數說明：

 

參數	類型	說明
data	String	開發者服務器返回的數據
statusCode	Number	開發者服務器返回的 HTTP 狀態碼

 

 

 

 

 

官方實例代碼：

 

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]
                    });
                  }
                },
              })
            }
          }
        })
      }
    })
  },

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

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