微信小程序?qū)崿F(xiàn)上傳多個(gè)文件 超過(guò)10個(gè)
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)上傳多個(gè)文件超過(guò)10個(gè)的具體代碼,供大家參考,具體內(nèi)容如下
【小程序筆記】wx.uploadFile(OBJECT)
先說(shuō)說(shuō)遇到的問(wèn)題:
小程序可通過(guò)wx.uploadFile(OBJECT)接口上傳手機(jī)文件至服務(wù)器,但是在文檔中關(guān)于請(qǐng)求中有這么一段說(shuō)明:
request、uploadFile、downloadFile 的最大并發(fā)限制是 10 個(gè)
意思就是這三個(gè)接口請(qǐng)求并發(fā)數(shù)不能超過(guò)10個(gè),否則報(bào)以下錯(cuò)誤
uploadFile:fail exceed max upload connection count 10
但是業(yè)務(wù)場(chǎng)景總會(huì)需要堆砌一些復(fù)雜的功能,比如需要上傳多張照片到服務(wù)器啊,需要一張一張的上傳,等等。
既然不能一下子上傳多個(gè)文件,那就用最簡(jiǎn)單的方法完成復(fù)雜的功能即可,先上傳完一張?jiān)偕蟼飨乱粡?,哈?/p>
具體看看主要兩個(gè)方法:
/**
* 上傳照片//選擇圖片時(shí)限制9張,如需超過(guò)9張,同理亦可參照此方法上傳多張照片
*/
uploadImg:function(){
var that = this;
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res){
var successUp = 0; //成功
var failUp = 0; //失敗
var length = res.tempFilePaths.length; //總數(shù)
var count = 0; //第幾張
that.uploadOneByOne(res.tempFilePaths,successUp,failUp,count,length);
},
});
},
/**
* 采用遞歸的方式上傳
*/
uploadOneByOne(imgPaths,successUp, failUp, count, length){
var that = this;
wx.showLoading({
title: '正在上傳第'+count+'張',
})
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //僅為示例,非真實(shí)的接口地址
filePath: imgPaths[count],
name: count,//示例,使用順序給文件命名
success:function(e){
successUp++;//成功+1
},
fail:function(e){
failUp++;//失敗+1
},
complete:function(e){
count++;//下一張
if(count == length){
//上傳完畢,作一下提示
console.log('上傳成功' + successUp + ',' + '失敗' + failUp);
wx.showToast({
title: '上傳成功' + successUp,
icon: 'success',
duration: 2000
})
}else{
//遞歸調(diào)用,上傳下一張
that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
console.log('正在上傳第' + count + '張');
}
}
})
},
注釋比較詳細(xì),可以看到方法比較簡(jiǎn)單,示例只做9張圖片的上傳,可使用for循環(huán)調(diào)用上傳文件的接口,但是在某些特定的場(chǎng)景下,需要考慮可能需要上傳多張的需求,可使用此方法一張一張的上傳,如果需要控制前一張上傳完才能進(jìn)行下一張的上傳,此方法亦非常適用,可以做一些成功和失敗的處理,看場(chǎng)景需要而定
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法,涉及javascript針對(duì)瀏覽器的判斷、事件愛(ài)你的添加與移除等相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)控制表格單元格垂直對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格單元格垂直對(duì)齊的方法,涉及javascript操作表單元素樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript oncopy事件用法實(shí)例解析
這篇文章主要介紹了JavaScript oncopy事件用法實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
javascrit中undefined和null的區(qū)別詳解
這篇文章主要介紹了javascrit中undefined和null的區(qū)別詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
JavaScript深拷貝的幾種實(shí)現(xiàn)方法實(shí)例
javascript深拷貝是初學(xué)者甚至有經(jīng)驗(yàn)的開(kāi)發(fā)著,都會(huì)經(jīng)常遇到問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的幾種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05

