小程序+php实现多图片上传

一、小程序页面

  ① .wxml页面

        <view class="list infor-pic-cont">
                <view class="text-btn">
                    <view class="title">上传清运资质</view>
                    <button bindtap="previewImg">上传图片</button>
                </view>
                <view class="picCont" wx:for="{{cleanImgArr}}" wx:key="{{index}}" wx:if="{{!cleanImgArrB}}">
                    <image src="{{item}}" mode='aspectFill' data-index="{{index}}"></image>
                    <icon class="delete-pic-icon" type="cancel" bindtap="deleteImg" type="clear" data-index="{{index}}"/> 
                </view>
            </view>
             <view class="list infor-pic-cont">
                <view class="text-btn">
                    <view class="title">上传合同材料</view>
                    <button bindtap="previewImgHT">上传图片</button>
                </view>
                <view class="picCont" wx:for="{{cleanImgArr1}}" wx:key="{{index}}" wx:if="{{!cleanImgArrB}}">
                    <image src="{{item}}" mode='aspectFill' data-index="{{index}}"></image>
                    <icon class="delete-pic-icon" type="cancel" bindtap="deleteImg1" type="clear" data-index="{{index}}"/> 
                </view>
            </view> 
        </view>        

② .js页面

data: {
    company:'',
    person:'',
    workperson:'',
    workphone:'',
    cleanImgArr: [ ],   //保存上传图片url的数组
    cleanImgArr1: [ ],   //保存上传图片url的数组
    images: [],
    cleanImgID: [],
    cleanImgID2: [],
    windowBox: false,
    cleanImgArrB: false,
  },
 previewImg: function(e){
    var that = this;
    wx.chooseImage({
      count: 9,     //默认9张图片
      sizeType:['original','compressed'],    //指定图片为原图或者缩略图，默认二者都有
      sourceType:['album','camera'],      //指定来源是相机或相册选取，默认二者都有  
      success: function(res){
        that.setData({
          cleanImgArr:res.tempFilePaths,
        })
      var length = res.tempFilePaths.length;
      that.setData({
        cleanImgID:[],
      })
       for(var i = 0; i < length; i++){
          wx.uploadFile({
            url: 'xxx',      //清运资质url
            filePath: res.tempFilePaths[i],
            name: 'file',
            header: {
              'Content-Type': "multipart/form-data"
            },
            method:'POST',
            success: function (res) {
              var jsarr=JSON.parse( res.data);
              that.data.cleanImgID.push(jsarr.res);
            }
          })
        }
      }
    })
  },
 //上传合同资料图片
 previewImgHT: function(e){
  var that = this;
  wx.chooseImage({
    count: 9,     //默认9张图片
    sizeType:['original','compressed'],    //指定图片为原图或者缩略图，默认二者都有
    sourceType:['album','camera'],     //指定来源是相机或相册选取，默认二者都有
    success: function(res){
      that.setData({
        cleanImgArr1: res.tempFilePaths
      })

      var length = res.tempFilePaths.length;
      for(var i = 0; i < length; i++){ 
        that.setData({
          cleanImgID2: [ ]
        })
        wx.uploadFile({
          url: 'xxx',      //合同url
          filePath: res.tempFilePaths[i],
          name: 'file',
          header: {
            'Content-Type': "multipart/form-data"
          },
          method:'POST',
          success: function (res) {
           var jsarr2=JSON.parse(res.data);
            that.data.cleanImgID2.push(jsarr2.data);
          }
        })
      }
    }
  })
},

//删除清运资质图片
deleteImg: function (e) {
var that = this;
var cleanImgArr = that.data.cleanImgArr;
var index = e.currentTarget.dataset.index;//获取当前长按图片下标
wx.showModal({
 title: '提示',
 content: '确定要删除此图片吗？',
 success: function (res) {
  if (res.confirm) {
   cleanImgArr.splice(index, 1);
    that.setData({
      cleanImgArr:cleanImgArr
    })
  
  } else if (res.cancel) {
    return false;
   }
 }
})
},

上传表单：

  wx.request({
    url: 'xxx',
    // filePath: that.data.itemPic,
    // name: "file",
    data:{
      company: e.detail.value.company,     //单位名称
      qualifica:JSON.stringify(that.data.cleanImgID),  //清运资质
      contractImg:JSON.stringify(that.data.cleanImgID2),   //合同材
    },
    header: {
      'content-type': 'application/json' // 默认值
  },
  success: function (res) {
 
    that.setData({
      windowBox:true,
    })
 
    }
  })

}
},

php页面 (图片上传oss)

    //上传清运资质
    public function cleanImg()
    {
        $file = $_FILES;
        $rand=rand(1111,9999);
        $str = substr($file['file']['name'], strrpos($file['file']['name'], '.') + 1);//截取后缀名
        if ($str == "jpg" || $str == "jpeg" || $str == "BMP" || $str == "PNG" || $str == "GIF") {
            $faceimg = 'faceimdg/' . $rand . '.' . $str;//要保存的图片名称
            //图片存入oss
            $accessKeyId = config('aliyun_oss.accessKeyId');//去阿里云后台获取秘钥
            $accessKeySecret = config('aliyun_oss.accessKeySecret');//去阿里云后台获取秘钥
            $endpoint = config('aliyun_oss.endpoint');//你的阿里云oss地址
            $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
            $bucket = "xxx";
            //   判断bucketname是否存在，不存在就去创建
            if (!$ossClient->doesBucketExist($bucket)) {
                $ossClient->createBucket($bucket);
             }
            $files = $file['file']["tmp_name"];
            try {
                $ossClient->uploadFile($bucket, $faceimg, $files);
            } catch (OssException $e) {
                $e->getErrorMessage();
            }
            $arr = ['code' => 1000, 'msg' => 'success','res'=>$faceimg];
            return $arr;

        }
    }

思路：多张图片上传oss,上传成功返回图片路径，前台拼接后与其他变量一起提交表单，入库

 

效果图：