J9国际集团☆专注于网□□□□站建设和★微信小程□□□□序定制开□□□□发，今天给大◎家分享一□□□下微信小□□□□程序选择◥多张图片□□上传到服♦务器的实□□□现及上传□□□进度显示□□□的代码全□□□解与分享。



这里主要□□使用了两□□个微信的□□接口

一、wx.chooseImage(OBJECT) 从本地相□□□□册选择图□□□□片或使用□□相机拍照；
二、wx.uploadFile(OBJECT) 将本地资□□源上传到♦开发者服□□□□务器，返回一个 uploadTask 对象，通过 uploadTask，可监听上▲传进度变□□□□化事件，以及取消□□上传任务。

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;}

下面是关□□□□键的JS代码

  /**
   * 页面的初□□□□始数据
   */
  data: {
    upload_picture_list:[]
  },
  uploadpic: function (e) {
    var that = this
    var upload_picture_list = that.data.upload_picture_list
    wx.chooseImage({
      count: 8, // 默认9，这里显示□□□一次选择□□□□相册的图□□□□片数量
      sizeType: ['original', 'compressed'], // 可以指定□□□是原图还□□是压缩图，默认二者□□□□都有
      sourceType: ['album', 'camera'], // 可以指定□□□来源是相□□□册还是相※机，默认二者◤都有
      success: function (res) {
        // 返回选定□□□□照片的本□□□地文件路□□□□径列表，tempFilePath可以作为img标签的src属性显示□□□图片
        var tempFiles = res.tempFiles
        //循环把图□□片加入上□□传列表
        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,
        }) 
        //循环把图□□□□片上传到□□□服务器 并显示进□□□度
        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+"图片到服□□□□务器：")
  console.log(upload_picture_list[j])
  var upload_task = wx.uploadFile({
    url: 'https://www.nzweibaum.com/', //需要用HTTPS，同时在微信公众平台后台添加服务器地址
    filePath: upload_picture_list[j]['path'],//上传的文件本地地址
    name: 'file',
    formData: {'path': 'wxchat'},//附近数据，这里为路□□□径
    success: function (res) {
      var data = JSON.parse(res.data) //字符串转◉化为JSON
      if (data.Success == true) {
        var filename = "https://www.nzweibaum.com/" + data.SaveName
        upload_picture_list[j]['path_server'] = filename
      }
      that.setData({
        upload_picture_list: upload_picture_list
      }) 
      console.log("图片上传" + j +"到服务器□□□□完成：")
      console.log(upload_picture_list[j])
    }
  })
  upload_task.onProgressUpdate((res) => {
    // console.log('上传进度', res.progress)
    // console.log('已经上传□□□的数据长□□□度', res.totalBytesSent)
    // console.log('预期需要◤上传的数□□□□据总长度', res.totalBytesExpectedToSend)
    upload_picture_list[j]['upload_percent'] = res.progress
    console.log('第' + j + '个图片上□□□传进度：' + upload_picture_list[j]['upload_percent'])
    console.log(upload_picture_list)
    that.setData({
      upload_picture_list: upload_picture_list
    }) 
    
  })
}

PHP代码（服务器接□□□受文件，以THINKPHP为例）
//$path为上传路径
public function upload($path){
if(IS_POST){
  $upload = new \Think\Upload(); // 实例化上◥传类
  $upload->exts = array('jpg', 'bmp', 'gif', 'png', 'jpeg'); // 设置附件□□□□上传类型
  $upload->saveName = array('randomname', '6');
  $upload->maxSize = 2024000;//图片上传
  $upload->rootPath = 'Public'; // 设置附件□□□□上传目录
  $upload->savePath = '/upload/' . $path . '/';
  $upload->autoSub = false;
  $info = $upload->upload();
  if (!$info) {// 上传错误□□□提示错误□□□□信息
     $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);
}

这里备注□□□下，就是最大◢并发送是10个文件一◤起上传，同时默认□□□超时时间□□□和最大超☆丨时时间□□□□都□□是 60s，上传图片□□□进度显示□□□□需要基础□□□库 1.4.0 开始才支□□□持，如果版本◤丨太低需□□要□□做兼容处□□□理或者不□□□显示进度。

到此就算□□大功高成，微信小程□□□□序多图上♦传功能基□□本就算完□□成，此代码示□□□例J9国际集团已经测□□□试通过，如有问题□□□欢迎反馈◆我们的客□□服QQ

此文章为★J9国际集团□□原创，转载请注□□□□明出处。