注冊

微信小程序API上傳下載,將本地資源上傳到開發(fā)者服務(wù)器

2017-12-22
導(dǎo)讀:wx.uploadFile(OBJECT) 將本地資源上傳到開發(fā)者服務(wù)器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后,可通過此接口將本地資源上傳到指定服務(wù)器??蛻舳税l(fā)起一個...

wx.uploadFile(OBJECT)


將本地資源上傳到開發(fā)者服務(wù)器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后,可通過此接口將本地資源上傳到指定服務(wù)器。客戶端發(fā)起一個HTTPS POST請求,其中Content-Typemultipart/form-data。

OBJECT參數(shù)說明:

 

參數(shù) 類型 必填 說明
url String 開發(fā)者服務(wù)器url
filePath String 要上傳文件資源的路徑
name String 文件對應(yīng)的key , 開發(fā)者在服務(wù)器端通過這個key可以獲取到文件二進(jìn)制內(nèi)容
header Object HTTP 請求 Header,header中不能設(shè)置Referer
formData Object HTTP 請求中其他額外的form data
success Function 接口調(diào)用成功的回調(diào)函數(shù)
fail Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

 

success返回參數(shù)說明:

參數(shù) 類型 說明
data String 開發(fā)者服務(wù)器返回的數(shù)據(jù)
statusCode Number HTTP狀態(tài)碼

示例代碼:

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

 

返回值:

基礎(chǔ)庫 1.4.0 開始支持,低版本需做兼容處理

返回一個uploadTask對象,通過uploadTask,可監(jiān)聽上傳進(jìn)度變化事件,以及取消上傳任務(wù)。

uploadTask

uploadTask 對象的方法列表:

方法 參數(shù) 說明 最低版本
onProgressUpdate callback 監(jiān)聽上傳進(jìn)度變化 1.4.0
abort   中斷上傳任務(wù) 1.4.0

onProgressUpdate 返回參數(shù)說明:

參數(shù) 類型 說明
progress Number 上傳進(jìn)度百分比
totalBytesSent Number 已經(jīng)上傳的數(shù)據(jù)長度,單位 Bytes
totalBytesExpectedToSend Number 預(yù)期需要上傳的數(shù)據(jù)總長度,單位 Bytes

示例代碼:

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

uploadTask.onProgressUpdate((res) => {
    console.log('上傳進(jìn)度', res.progress)
    console.log('已經(jīng)上傳的數(shù)據(jù)長度', res.totalBytesSent)
    console.log('預(yù)期需要上傳的數(shù)據(jù)總長度', res.totalBytesExpectedToSend)
})

uploadTask.abort() // 取消上傳任務(wù)

Bug & Tip

  1. tip: 最大并發(fā)限制是 10 個
  2. tip: 默認(rèn)超時時間和最大超時時間都是 60s

wx.downloadFile(OBJECT)


下載文件資源到本地??蛻舳酥苯影l(fā)起一個HTTP GET請求,返回文件的本地臨時路徑。

OBJECT參數(shù)說明:

 

參數(shù) 類型 必填 必填
url String 下載資源的 url
header Object HTTP 請求 Header
success Function 下載成功后以 tempFilePath 的形式傳給頁面,res={tempFilePath:'文件的臨時路徑'}
fail Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

 

注:文件的臨時路徑,在小程序本次啟動期間可以正常使用,如需持久保存,需在主動調(diào)用 wx.saveFile,在小程序下次啟動時才能訪問得到。

示例代碼:

wx.downloadFile({
  url: 'http://example.com/audio/123', //僅為示例,并非真實的資源
  success: function(res) {
    wx.playVoice({
      filePath: res.tempFilePath
    })
  }
})

返回值:

基礎(chǔ)庫 1.4.0 開始支持,低版本需做兼容處理

返回一個downloadTask對象,通過downloadTask,可監(jiān)聽下載進(jìn)度變化事件,以及取消下載任務(wù)。

downloadTask

downloadTask 對象的方法列表:

方法 參數(shù) 說明 最低版本
onProgressUpdate callback 監(jiān)聽下載進(jìn)度變化 1.4.0
abort   中斷下載任務(wù) 1.4.0

onProgressUpdate 返回參數(shù)說明:

參數(shù) 類型 說明
progress Number 下載進(jìn)度百分比
totalBytesWritten Number 已經(jīng)下載的數(shù)據(jù)長度,單位 Bytes
totalBytesExpectedToWrite Number 預(yù)期需要下載的數(shù)據(jù)總長度,單位 Bytes

示例代碼:

const downloadTask = wx.downloadFile({
    url: 'http://example.com/audio/123', //僅為示例,并非真實的資源
    success: function(res) {
        wx.playVoice({
            filePath: res.tempFilePath
        })
    }
})

downloadTask.onProgressUpdate((res) => {
    console.log('下載進(jìn)度', res.progress)
    console.log('已經(jīng)下載的數(shù)據(jù)長度', res.totalBytesWritten)
    console.log('預(yù)期需要下載的數(shù)據(jù)總長度', res.totalBytesExpectedToWrite)
})

downloadTask.abort() // 取消下載任務(wù)

Bug & Tip

  1. tip: 最大并發(fā)限制是 10 個
  2. tip: 默認(rèn)超時時間和最大超時時間都是 60s
  3. tip: 網(wǎng)絡(luò)請求的 referer 是不可以設(shè)置的,格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html,其中{appid}為小程序的 appid,{version}為小程序的版本號,版本號為 0 表示為開發(fā)版。
  4. tip: 6.5.3 以及之前版本的 iOS 微信客戶端header設(shè)置無效

更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)