1. 程式人生 > >小程序上傳圖片,排隊上傳

小程序上傳圖片,排隊上傳

length 內容 ext 有效 ges mar 顯示 func 沒有

//沒有處理的wxml,但是有效果,可以簡單試驗一下 <view class=‘minbox1‘> <text class=‘red wzgs‘>*</text> <text class=‘wzgs‘>照片(點擊下面方框上傳)</text> <text class=‘mis‘>{{z}}/9</text> </view> <view class=‘left‘ wx:if="{{pics}}" wx:for="{{pics}}"> <image style=‘float:left;‘ class="carts-image" src="{{item}}" /> </view> </view> <view class=‘tpys‘> <image style=‘margin-top:-50px;‘ class="carts-image" bindtap="upimgall" src=‘/images/1.png‘ /> <view class=‘huang‘></view> <view class=‘border‘> </view> </view>


Pages({ data:{ count: [1, 2, 3, 4, 5, 6, 7, 8, 9],//最多上傳9張,
pics: [], }, upimgall: function (e) {//方法 var t = this,
       i = t.data.pics.length, //已經上傳的圖片長度
       n = t.data.count.length; if (n <= i) return t.showErroring("最多上傳9張照片"), !1;
       //選擇圖片 wx.chooseImage({ count: n - i, sizeType: ["compressed"],// 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ["album", "camera"],// 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { var imgsrc = res.tempFilePaths;//文件上傳的臨時路徑 var i = res.tempFilePaths; var j = i.length - 1 if (i.length > 0) { var n = t.data.pics.concat(i); t.setData({ //pics: n,需要圖片上傳完在顯示在頁面,防止網絡問題 imageArrs: n, }); var r = 0, s = i.length - 1; for (r in i) wx.uploadFile({//確保圖片上傳的順序
url: ‘‘, filePath: i[r], name: "file", formData: { uid:uid, imgurl: i[r] }, success: function (e) {
                  //上傳之後,返回來的圖片路徑, t.data.iimages = t.data.iimages.concat(域名 + e.data); t.setData({
                   //把返回來的圖片顯示出來 imgs: t.data.iimages }) r == s && wx.hideLoading(); } }); } var data = { program_id: 1 } t.setData({ z: t.data.pics.length, }) } }) } })

如果有需要下載圖片的可以看:https://www.cnblogs.com/naturl/p/9481072.html,也就是上一篇,正好讓內容銜接以下

小程序上傳圖片,排隊上傳