小程序+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,上傳成功返回圖片路徑，前台拼接后與其他變量一起提交表單，入庫

 

效果圖：