微信小程序上傳圖片每次只能上傳一張,所有很多朋友就會問想要多張圖片上傳怎么辦?
創(chuàng)新互聯(lián)主要從事網(wǎng)站設計、做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務米脂,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
這里使用遞歸,當上傳完一張圖片后重新執(zhí)行這個函數(shù),直到所有的圖片都上傳完成后,就不再調(diào)用該函數(shù)。
首先,我們來看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)這兩個個api
示例代碼是這樣的:
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 } }) } })
這里的示例代碼,是選擇圖片,然后上傳選中的圖片中的第一個圖片;
現(xiàn)在開始寫多張圖片上傳的例子
首先,我們還是要選擇圖片
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths;//這里是選好的圖片的地址,是一個數(shù)組 } })
然后在app.js中寫一個多張圖片上傳的方法,后面引入,你也可以寫在一個JS文件中,后面引入:
//多張圖片上傳 function uploadimg(data){ var that=this, i=data.i?data.i:0, success=data.success?data.success:0, fail=data.fail?data.fail:0; wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'fileData', formData:null, success: (resp) => { success++; console.log(resp) console.log(i); //這里可能有BUG,失敗也會執(zhí)行這里 }, fail: (res) => { fail++; console.log('fail:'+i+"fail:"+fail); }, complete: () => { console.log(i); i++; if(i==data.path.length){ //當圖片傳完時,停止調(diào)用 console.log('執(zhí)行完畢'); console.log('成功:'+success+" 失?。?+fail); }else{//若圖片還沒有傳完,則繼續(xù)調(diào)用函數(shù) console.log(i); data.i=i; data.success=success; data.fail=fail; that.uploadimg(data); } } }); }
多張圖片上傳的方法寫好了,下面就是引用:
var app=getApp(); Page({ data:{ pics:[] }, choose:function(){//這里是選取圖片的方法 var that=this; wx.chooseImage({ count: 9-pic.length, // 最多可以選擇的圖片張數(shù),默認9 sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // album 從相冊選圖,camera 使用相機,默認二者都有 success: function(res){ var imgsrc=res.tempFilePaths; that.setData({ pics:imgsrc }); }, fail: function() { // fail }, complete: function() { // complete } }) }, uploadimg:function(){//這里觸發(fā)圖片上傳的方法 var pics=this.data.pics; app.uploadimg({ url:'https://........',//這里是你圖片上傳的接口 path:pics//這里是選取的圖片的地址數(shù)組 }); }, onLoad:function(options){ } })
剛好寫了一個node上傳圖片代碼,親測可以使用,
或
一個簡單的PHP接收代碼:
<?php $imgname = $_FILES['file']['name']; $tmp = $_FILES['file']['tmp_name']; $filepath = 'now/';//記得要自己創(chuàng)建這個文件夾 if(move_uploaded_file($tmp,$filepath.$imgname.".png")){ echo "上傳成功"; }else{ echo "上傳失敗"; } ?>
完結(jié)。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
標題名稱:微信小程序多張圖片上傳功能
本文路徑:http://jinyejixie.com/article46/gdpphg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、做網(wǎng)站、電子商務、標簽優(yōu)化、企業(yè)建站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)