【微信小程式開發筆記】上傳多個檔案超過10個
【小程式筆記】wx.uploadFile(OBJECT)
先說說遇到的問題:
小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器,但是在文件中關於請求中有這麼一段說明:
request、uploadFile、downloadFile
的最大併發限制是 10 個
意思就是這三個介面請求併發數不能超過10個,否則報以下錯誤
uploadFile:fail exceed max upload connection count 10
但是業務場景總會需要堆砌一些複雜的功能,比如需要上傳多張照片到伺服器啊,需要一張一張的上傳,等等。
既然不能一下子上傳多個檔案,那就用最簡單的方法完成複雜的功能即可,先上傳完一張再上傳下一張,哈哈
具體看看主要兩個方法:
/**
* 上傳照片//選擇圖片時限制9張,如需超過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; //總數
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', //僅為示例,非真實的介面地址
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{
//遞迴呼叫,上傳下一張
that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
console.log('正在上傳第' + count + '張');
}
}
})
},
註釋比較詳細,可以看到方法比較簡單,示例只做9
張圖片的上傳,可使用for
迴圈呼叫上傳檔案的介面,但是在某些特定的場景下,需要考慮可能需要上傳多張的需求,可使用此方法一張一張的上傳,如果需要控制前一張上傳完才能進行下一張的上傳,此方法亦非常適用,可以做一些成功和失敗的處理,看場景需要而定
相關推薦
【微信小程式開發筆記】上傳多個檔案超過10個
【小程式筆記】wx.uploadFile(OBJECT) 先說說遇到的問題: 小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器,但是在文件中關於請求中有這麼一段說明: request、uploadFile、down
【微信小程式開發筆記】--蘋果手機的懸浮按鈕居中問題
小程式開發筆記(二)–蘋果手機的懸浮按鈕居中問題 記錄小程式開發過程中遇到的那些問題 先看效果圖 頁面很簡單,上面兩個輸入框,下方一個按鈕,輸入框分別是textarea和input,按鈕在這裡我做成懸浮狀態(演示用,實際並不需要懸浮)。 頁面
【微信小程式學習筆記】1:開發一個帶歷史記錄功能的四則計算器
端午CSDN學院促銷,買了微信小程式開發實戰跟著學習一下。 混合模式移動應用 微信小程式是一種Hybrid-App(混合模式移動應用),它是介於Native-App和Web-App之間的,更接近前者,但開發成本小很多。 基本結構 pages目錄:其內的
【微信小程式學習筆記】彈窗的兩種姿勢
在wxml檔案里布局彈窗,利用條件渲染,在js程式碼裡控制是否顯示 wxml <view > <loading wx:if="{{showLoading}}">載入中&
微信小程式開發之圖片上傳+Java服務端接收 好不好使有待確認
閒言少敘直入正題存放路徑:/root/apache-tomcat-8.5.30/webapps/images/xxx.jpg前端程式碼在網上一搜一大堆,且搜出來的結果基本上是正確的,沒啥好說的,我連程式碼都不想貼(如果有時間的話明天整理下貼在文章結尾,沒時間的話就不貼了)。但是,但是,但是,靠譜的,不用改動就
【微信小程式開發】快速開發一個動態橫向導航模板並使用
目標:做個橫向導航,可以橫向滾動。 思路:使用scroll-view元件,可實現橫向滾動功能。scroll-view內包含一個動態的view列表,代表導航的每一項,導航要接收動態陣列,然後使用列表展示。使用模板技術做到可複用。 按照思路,先要做個template。 新建一個wxml檔案:navbar.w
【微信小程式開發之坑】javascript建立date物件
最近開發中用到date,開始以如下方式來建立: var date = new Date('2018-01-30 11:00:00'); 在開發工具上,除錯,ios 和 android都好好的。 在真機上一跑,android沒問題,ios出問題了。 不應該呀,按理,在開發工具上整合的是ios瀏覽器核心。
【微信小程式開發遇到的那些坑】之——為什麼上拉載入後會返回頂部
我下面的程式碼是沒有問題的,確實每次都能載入到,但是都會重回頂部 注:下面的程式碼不能直接用,有一些變數沒有貼上來 //上拉載入下一頁商品 onReachBottom: function()
【微信小程式開發】實現輪番圖效果swiper 元件
輪番效果在很多的網站主頁或者手機應用端都能看到,在微信小程式中使用swiper元件來實現圖片輪番,今天的小例子效果如下: 為了方便演示我將動畫切換的間隔調整為3s,現實專案中一般為5s,具體看專
【微信小程式開發•系列文章四】模組化
微信小程式的MINA框架,其實是許多前端開發技術的組合。這篇文章中,我們來簡單地討論一下模組化。 1、模組化標準 玩前端的同學大部分都知道模組化的幾個標準,CommonJs / AMD / CMD。這裡花費一些篇幅簡單的介紹一下,比較熟悉的同學可以跳過這一部分的介紹。(1)
【微信小程式開發】IOS與安卓樣式相容問題
1.margin在IOS中失效 在頁面中元素使用margin值,在某些IOS裝置下會出現失效的情況,而安卓機則正常顯示,此問題暫無直接的解決方案,當前使用空DIV控制間距。 2.fixed定位問題 整個頁面的fixed定位,在ios下下拉會觸發下拉事件,但
微信小程式開發 筆記
1.[wxss]設定帶透明度的rgb顏色:rgb(0,0,0,0.5); 2.小程式使用類似於iOS的NSNotification:(第三方:https://github.com/icindy/WxNotificationCenter) (1)在需要收發通知的頁面引入WxNotification
微信小程式開發筆記5——元素隨著頁面滾動吸附在頂部的效果
現在很多app都有這樣的效果,某元素隨著頁面的滾動,吸附在頂部的效果。本文將介紹實現這種效果的兩種不同的方法。 先看一下效果圖: 使用IntersectionObserver 思路 上一篇部落格詳細介紹了IntersectionObserver的用法。這裡用來實現這種吸附的
微信小程式開發筆記4—— IntersectionObserver 用法詳解
看微信文件時看到這個很有趣的api,但是官方的文件和例子關於這個api的介紹都是很讓人失望的,所以花了點時間瞭解了以下這個方法,做個記錄,供參考。 簡介 首先,我的理解是,這是一個觀察器(廢話),它用來監測目標物件與某個參照物的相交情況。什麼是相交情況?通俗的說,就是兩個區域有重
微信小程式開發筆記2——自定義導航欄元件
本文主要是熟悉微信小程式自定義元件的開發,以一個常見的導航欄(Tabbar)需求為例。 官方文件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 首先我們先看一
【微信小程式控制硬體①】 全網首發,藉助 emq 訊息伺服器帶你如何搭建微信小程式的mqtt伺服器,輕鬆控制智慧硬體!
一、前言; 從去年開始自學前端,到今年的伺服器的學習,也算是自己的一大進步了!這幾天開始搭建小程式的伺服器,琢磨了三天的Nginx中間訊息外掛,期間也是不睡午覺!也許入門Nginx,和大家一樣期
【微信小程式控制硬體②】 開始微信小程式之旅,匯入小程式Mqtt客戶端原始碼,實現簡單的驗證和通訊於伺服器!(附帶原始碼)
本博文由熱愛分享熱愛技術的半顆心臟原創,非官方人員、非組織名義編寫,博文如有不對或侵犯您的權益,請及時留言,第一時間糾正! 一、前言; 繼續我們的小程式控制智慧硬體(包括esp8266)學
【微信小程式常見問題】點選指定文字實現指定文字變色解決方案一
1、效果展示 2、關鍵程式碼 index.wxml index.wxss index.js 3、原始碼獲取方式 百度雲連結:http://pan.baidu.com/s/1gfJU6Sb 密碼:p6hy 4、在編寫點選指定文字實現指定文字變色過程中有遇到任何問題獲取
微信小程式開發筆記
1.繫結資料的變數名動態 this.setData({ [key]: value }) // 2. wx.uploadFile本地測試時要使用http,不能使用https 3. wx.request返回的list陣列資料不能指定索引 小程式js //分頁載入
【微信小程式常見問題】匯入現有小程式專案解決方案
操作步驟 1、假設我們已經下載到微信小程式官方demo或者已下載到其他小程式demo 2、雙擊開啟【微信web開發者工具】 3、點選【本地小程式專案】 4、點選【新增專案】 5、根據實際選擇【