方維網(wǎng)絡(luò)專注于網(wǎng)站建設(shè)和微信小程序定制開發(fā)，今天給大家分享一下微信小程序選擇多張圖片上傳到服務(wù)器的實(shí)現(xiàn)及上傳進(jìn)度顯示的代碼全解與分享。



這里主要使用了兩個(gè)微信的接口

一、wx.chooseImage(OBJECT) 從本地相冊(cè)選擇圖片或使用相機(jī)拍照；
二、wx.uploadFile(OBJECT) 將本地資源上傳到開發(fā)者服務(wù)器，返回一個(gè) uploadTask 對(duì)象，通過(guò) uploadTask，可監(jiān)聽上傳進(jìn)度變化事件，以及取消上傳任務(wù)。

WXML代碼如下

<view class="picture_list">
    <view wx:for="{{upload_picture_list}}" class="picture_item">
         <image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}"   mode="aspectFill"></image>
         <image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}"   mode="aspectFill"></image>
         <view class="upload_progress" wx:if="{{item.upload_percent < 100}}">
              {{item.upload_percent}}%
         </view>
    </view>
    <view  class="picture_item">
    <image src="/images/btn_uploadpic.png" bindtap="uploadpic"  mode="aspectFill"></image>
    </view>
</view>

WXSS樣式代碼如下

.picture_list{
  padding:20px;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  align-content:flex-start;
}
.picture_item{margin:10px;position:relative;width:160rpx;height:160rpx;}
.upload_progress{position:absolute;top:0;left:0;opacity:0.7;background-color:#000;color:#fff;width:160rpx;height:160rpx;text-align:center;line-height:160rpx;font-size:12px;}
.picture_item image{width:160rpx;height:160rpx;}

下面是關(guān)鍵的JS代碼

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    upload_picture_list:[]
  },
  uploadpic: function (e) {
    var that = this
    var upload_picture_list = that.data.upload_picture_list
    wx.chooseImage({
      count: 8, // 默認(rèn)9，這里顯示一次選擇相冊(cè)的圖片數(shù)量
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFiles = res.tempFiles
        //循環(huán)把圖片加入上傳列表
        for (var i in tempFiles) {
          tempFiles[i]['upload_percent'] = 0
          tempFiles[i]['path_server'] = ''
          upload_picture_list.push(tempFiles[i])
        }
        that.setData({
          upload_picture_list: upload_picture_list,
        }) 
        //循環(huán)把圖片上傳到服務(wù)器 并顯示進(jìn)度
        for (var j in upload_picture_list) {
          if (upload_picture_list[j]['upload_percent'] == 0) {
             upload_file_server(that,upload_picture_list,j)
          }
        }
      }
    })
  },


function upload_file_server(that,upload_picture_list,j) {
  console.log("開始上傳"+j+"圖片到服務(wù)器：")
  console.log(upload_picture_list[j])
  var upload_task = wx.uploadFile({
    url: 'http://m.oulysa.com/', //需要用HTTPS，同時(shí)在微信公眾平臺(tái)后臺(tái)添加服務(wù)器地址
    filePath: upload_picture_list[j]['path'],//上傳的文件本地地址
    name: 'file',
    formData: {'path': 'wxchat'},//附近數(shù)據(jù)，這里為路徑
    success: function (res) {
      var data = JSON.parse(res.data) //字符串轉(zhuǎn)化為JSON
      if (data.Success == true) {
        var filename = "http://m.oulysa.com/" + data.SaveName
        upload_picture_list[j]['path_server'] = filename
      }
      that.setData({
        upload_picture_list: upload_picture_list
      }) 
      console.log("圖片上傳" + j +"到服務(wù)器完成：")
      console.log(upload_picture_list[j])
    }
  })
  upload_task.onProgressUpdate((res) => {
    // console.log('上傳進(jìn)度', res.progress)
    // console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度', res.totalBytesSent)
    // console.log('預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度', res.totalBytesExpectedToSend)
    upload_picture_list[j]['upload_percent'] = res.progress
    console.log('第' + j + '個(gè)圖片上傳進(jìn)度：' + upload_picture_list[j]['upload_percent'])
    console.log(upload_picture_list)
    that.setData({
      upload_picture_list: upload_picture_list
    }) 
    
  })
}

PHP代碼（服務(wù)器接受文件，以THINKPHP為例）
//$path為上傳路徑
public function upload($path){
if(IS_POST){
  $upload = new \Think\Upload(); // 實(shí)例化上傳類
  $upload->exts = array('jpg', 'bmp', 'gif', 'png', 'jpeg'); // 設(shè)置附件上傳類型
  $upload->saveName = array('randomname', '6');
  $upload->maxSize = 2024000;//圖片上傳
  $upload->rootPath = 'Public'; // 設(shè)置附件上傳目錄
  $upload->savePath = '/upload/' . $path . '/';
  $upload->autoSub = false;
  $info = $upload->upload();
  if (!$info) {// 上傳錯(cuò)誤提示錯(cuò)誤信息
     $data['Message'] = $upload->getError();
     $data['Success'] = false;
  } else {// 上傳成功
     foreach ($info as $file) {
         $filepath = "/" . $upload->rootPath . $file['savepath'] . $file['savename'];
         $data['Success'] = true;
         $data['SaveName'] = $filepath;
     }
  }
  $this->ajaxReturn($data);
}

這里備注下，就是最大并發(fā)送是10個(gè)文件一起上傳，同時(shí)默認(rèn)超時(shí)時(shí)間和最大超時(shí)時(shí)間都是 60s，上傳圖片進(jìn)度顯示需要基礎(chǔ)庫(kù) 1.4.0 開始才支持，如果版本太低需要做兼容處理或者不顯示進(jìn)度。

到此就算大功高成，微信小程序多圖上傳功能基本就算完成，此代碼示例方維網(wǎng)絡(luò)已經(jīng)測(cè)試通過(guò)，如有問(wèn)題歡迎反饋我們的客服QQ

此文章為方維網(wǎng)絡(luò)原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。