<i id="yupd0"></i>
  • <i id="yupd0"></i>
  • <thead id="yupd0"></thead>
    <blockquote id="yupd0"></blockquote>
    <i id="yupd0"></i>
  • 碼迷,www.greeshyz.com
    首頁 > 微信 > 詳細

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

    時間:2018-08-05 00:30:52      閱讀:10020      評論:0      收藏:0      [點我收藏+]

    標簽:頭像   關于   服務   ada   multipart   開發者   ssi   上傳文件   develop   

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

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

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

    3. 修改原來的小程序頭像并保存,調用后臺接口修改操作

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

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

    1、選擇圖片接口

    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

    第二步:

    2、上傳圖片接口 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] }); } }, }) } } }) } }) },

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

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

     

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

    標簽:頭像   關于   服務   ada   multipart   開發者   ssi   上傳文件   develop   

    原文地址:https://www.cnblogs.com/LCH-M/p/9420482.html

    (3)
    (7)
       
    舉報
    評論 一句話評論(0
    登錄后才能評論!
    迷上了代碼!
    91色国产论坛,久草99福利资源,青青草在线华人,99热在线视频观看免费,青青草a片免费看,青青草av视频导航,香蕉网站伊人大香蕉 青青碰人青青草免费 国产自拍偷拍在线播放 青青草华人在线av 伊人影院在线大香 无码大香蕉网伊人色 久久大香蕉视频网 青草精品资源在线 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 青青草手机在线视频 青青草久久爱大香蕉 国产青青草自拍 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 av图片在线看 久草视频福利免费资源站 自拍国产视频在线 www.琪琪色 爱色影爱色搞搞 97资源库 大香萑a久草视频 久草在线福利资站 青青草成人在线免费视频 久久精品国can视频在热 99热国产情侣偷拍 国产自拍 在线 凹凸分类视频97免费 av啪啪中文网站 青青草91自拍视频 奇米影视第四色 国产无限制自拍 大香蕉伊人精品在线 久久手机看片国产免费 无码大香蕉网伊人色 亚洲激情色 久草99福利资源 狼人色终合网站 91色国产色去色 2019奇米777奇米网 久久草妹妹色 米奇影院888奇米色 青青青草成人免费现看 超碰自拍 在线99热这里精品 色琪琪永久无码 伊人大香蕉成人视频综合 国产自拍视频在线 大香蕉伊人久操在线 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 激情图片,激情小说 超碰碰av大香蕉伊人 久草97大香蕉伊人 美女伊人色情香蕉网站 青青草华人免费视频在线 大香蕉伊人久草视频 奇米网在线手机在线 青草七次郞视频观看 青青草公开在线观看 狠狠夜夜干大香蕉伊人 777奇米网 日逼视频网站 欧美人和动物XXX 大香蕉色 欧美 国产 奇米影院首页 大香蕉伊人久久爱在线 青青青草免费手机播放 国产青青草 欧美一级黑寡妇夜夜干 啪啪 国产精品 东方aⅴ在线看 手机看A片 777米奇色狠狠俺去啦 香蕉网站伊人中文字幕 久操在线新免费视频 伊人影院在线大香 大香蕉成人伊人在线视频 青青草成人在线视频观看 91国产自拍偷拍视频 青青草色爱久久 精品国产自拍 小色狗 琪琪热热色无码 影音先锋大香蕉久草资源 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 超碰视频起碰视频 国产偷拍自拍影音先锋 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 超碰视频起碰视频 国产偷拍自拍影音先锋 老鸭窝在线视频 www.奇米在线四色 老版本日本怡春院 强奸乱伦在线观看 青青草在观视频 色琪琪在线视频原网 欧美色色大香焦 欧美色热图 亚洲香蕉手机在线观看视频 偷拍偷窥自拍网站 超91在线观看 最新奇米奇色777在线 婷婷网站 微拍秒拍福利视频 自拍在线 精品视频 欧美情色无码在线 久草激情视频 午夜高清影院在线观看 第四色青娱乐奇米影视 青青草在线综合 99热这里有精品 自拍偷拍影音先锋 国产自拍 先锋影音 成人在线视频97 久草在线免费观看大香蕉 99er久久国产精品在线 精品国产在线偷拍 啪啪青青草视频 国内偷拍 亚洲 大香蕉成人手机在线 在线伊人大香蕉手机版 久草伊人久草视频 伊人久久青青草综合网 青青草手机在线视频 青青草久久爱大香蕉 国产青青草自拍 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 av图片在线看 久草视频福利免费资源站 自拍国产视频在线 www.琪琪色 爱色影爱色搞搞 97资源库 大香蕉在线视频免费观看 a片直播妹子在线视频 a.v在线视频 开心五月色婷婷免费 香蕉福利视频在线观 青青草成人+激情偷拍 青青草视频大香蕉伊人网 av啪啪中文网站 青青草91自拍视频 奇米影视第四色 国产无限制自拍 大香蕉伊人精品在线 久久手机看片国产免费 无码大香蕉网伊人色 亚洲激情色 久草99福利资源 狼人色终合网站 91色国产色去色 2019奇米777奇米网 久久草妹妹色 米奇影院888奇米色 青青青草成人免费现看 超碰自拍 在线99热这里精品 色琪琪永久无码 伊人大香蕉成人视频综合 国产自拍视频在线 大香蕉伊人久操在线 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 激情图片,激情小说 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 操好屌色 米奇先锋 久草 偷拍 亚洲,偷拍,自拍,精品 伊人大香蕉综合色 大香蕉久久久 成人色啪啪 大香蕉色看片 欧美自拍在线 久久色综合网站xoxo 久热草大香蕉在线视频 久久大香蕉视频网 肏逼免费视频在线 网友自拍偷拍 欧美 国产 奇米影院首页 大香蕉伊人久久爱在线 青青青草免费手机播放 国产青青草 欧美一级黑寡妇夜夜干 啪啪 国产精品 东方aⅴ在线看 手机看A片 777米奇色狠狠俺去啦 香蕉网站伊人中文字幕 久操在线新免费视频 伊人影院在线大香 大香蕉成人伊人在线视频 青青草成人在线视频观看 91国产自拍偷拍视频 青青草色爱久久 精品国产自拍 小色狗 琪琪热热色无码 影音先锋大香蕉久草资源 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 欧美激情图片 自拍超碰 久草视频在线 天天 综合色伊人网 大香蕉视频成人中文网 大香蕉伊人欧美色 久热在线播放中文字幕 青青草久草福利 欧美色色大香焦 欧美色热图 亚洲香蕉手机在线观看视频 偷拍偷窥自拍网站 超91在线观看 最新奇米奇色777在线 婷婷网站 微拍秒拍福利视频 自拍在线 精品视频 欧美情色无码在线 久草激情视频 午夜高清影院在线观看 第四色青娱乐奇米影视 青青草在线综合 99热这里有精品 自拍偷拍影音先锋 国产自拍 先锋影音 成人在线视频97 久草在线免费观看大香蕉 99er久久国产精品在线
    久久草2019在线观看 99这里有精品 大香蕉免费公开青青草 狠狠色丁香婷婷综合 国产久草福利手机在线 青青草黄色三级网站 大香蕉他也啪 青青草视频大香蕉伊人网 久久爱大香焦在线视频 日本有码视频 成人视屏 国产精品91在线 91国产自拍小视频 伊人狼人香蕉网小说 青青草香蕉草久在线 av青青操 亚洲自拍欧美 91 国产 在线 97超碰资源共享 青青草伊人大香蕉 奇米四色网 国産偷拍91 精品国产在线自拍 伊人大香蕉色琪琪影院 caoprom超碰 青青视频在线视频 开心五月婷婷色婷在线 第四色色 Caoprom超碰视频 亚洲图片欧美图色姐 天天干情色网 操妹妹干妹妹 丁香五月婷婷伊人大香蕉 国产精品自拍偷拍在线 青青青成人社区 成人av在线 碰碰视频在线免费播放 影音先锋 小说色 久久草大香蕉 亚洲情色狼人网 思思久久re热线播放 久久草超碰 播播影院私人影院 大香蕉他也啪 米奇影视 成人国产老鸭窝 伊人大香蕉久久天天啪 男人的天堂 国产精品自偷拍 很很鲁在线97