1. 程式人生 > >【微信小程式開發筆記】上傳多個檔案超過10個

【微信小程式開發筆記】上傳多個檔案超過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、根據實際選擇【