麻豆做爰免费观看-日本熟妇一区二区三区-欧美午夜精品一区二区-xxxxx国产-精品欧美日韩-五月天黄色小说-亚洲熟妇一区-jizz国产视频-国产91九色-www好男人-国产精品久久久免费-九九热精彩视频-www..com国产-午夜簧片-欧美一区中文字幕-在线观看亚洲一区二区-一级少妇精品久久久久久久-www.欧美国产-日韩欧美综合视频-成人性视频免费网站

027-81331413

微信小程序怎么上傳多張圖片

發布時間:2020-10-27 瀏覽:2577

最近在寫小程序的相冊,需要多張圖片的上傳。因為小程序不支持數組的多張圖片同時上傳,然后根據自己的需求+借鑒網上各位大神的案例,總算搞定。分享下,不足之處,多多指教哦

頁面wxml:

<form bindsubmit="formSumbmit" bindreset="formReset">
<view class="modal-content">
   <view class="modal-photo">
        <view class="photo-img">
        <view wx:for="{{img_arr}}" wx:key="key">
           <image src='{{item}}'></image>
        </view>
        </view>
   </view>
</view>
<view class="modal-footer">
<view class="btn-confirm" ><button formType="submit" style="color:#00d000;">確定</button></view>
</view>
</form>

Ps:::img_arr:為存放上傳的多張圖片的數組,使用for和自動換行顯示出來

將本地圖片上傳js:

upimg: function () {
   console.log('上傳圖片');
   var that = this;
   if (that.data.img_arr == null) {
       console.log('null張');
       wx.chooseImage({
           count: 9,  //最多可以選擇的圖片張數,默認為9
           sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
           sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
           success: function (res) {
               console.log(res);
               that.setData({
                   img_arr: res.tempFilePaths     //concat
               });
           }
       })
   }
},

form表單提交,引用跳轉:

formSumbmit: function (e) {
   console.log('對話框確認按鈕點擊事件');
   console.log(e);

   var that = this;
   var data = [];
   data.photo_info = e.detail.value.photo_info;
   data.timestamp = Date.parse(new Date()) / 1000;  //當前時間戳
   data.i = 0;
   that.upload(data);
},

ok,開始將文件上傳服務器:

upload: function (e) {
   console.log('上傳圖片至服務器');
   var photo_info = e.photo_info;
   var timestamp = e.timestamp;
   var i = e.i;
   var that = this;
   var length = that.data.img_arr.length;
   //for (var i = 0; i < length; i++) {//循環遍歷圖片    //ps::這里也可以使用for循環方式一個個上傳,但是因為網絡等原因,不能很好地控制,故改用這種重新調用的方式來完成
       var openid = app.globalData.openid;
       wx.uploadFile({
           url: '',//自己的接口地址
           filePath: that.data.img_arr[i],
           name: 'name',
           formData:({//上傳圖片所要攜帶的參數
               openid: openid,
               photoInfo: photo_info,
               timestamp: timestamp,
               uploadName: 'name'   //上傳name
           }),
       success: function (res) {
           console.log(res);
           if (res) {
               console.log("返回的參數信息" + res.data);
               wx.showToast({
                   title: '上傳中...',
                   duration: 3000,
                   icon: 'loading'
               });
           }
       },
       complete:function(){
           console.log(i);
           i++;
           if(i == length){ //當圖片傳完時,停止調用
               console.log('成功');
               wx.showToast({
                   title: '上傳成功!',
                   duration: 1500,
                   success: function(){
                       that.hideModal();
                   }
               });
           }else {
               e.photo_info = photo_info;
               e.timestamp = timestamp;  //當前時間戳
               e.i = i;
               that.upload(e);     //ps::這里也可以使用for循環方式一個個上傳,但是因為網絡等原因,不能很好地控制,故改用這種重新調用的方式來完成
           }
       }
   })
   //}
},