微信小程序API上傳下載,將本地資源上傳到開發(fā)者服務(wù)器
wx.uploadFile(OBJECT)
將本地資源上傳到開發(fā)者服務(wù)器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后,可通過此接口將本地資源上傳到指定服務(wù)器。客戶端發(fā)起一個HTTPS POST請求,其中Content-Type
為multipart/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
-
tip
: 最大并發(fā)限制是 10 個 -
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
-
tip
: 最大并發(fā)限制是 10 個 -
tip
: 默認(rèn)超時時間和最大超時時間都是 60s -
tip
: 網(wǎng)絡(luò)請求的 referer 是不可以設(shè)置的,格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html,其中{appid}
為小程序的 appid,{version}
為小程序的版本號,版本號為 0 表示為開發(fā)版。 -
tip
: 6.5.3 以及之前版本的 iOS 微信客戶端header
設(shè)置無效
更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
第二部分:如何開通一個小商店