小程序多图上传+删除

img.wxml

<view class="conts_block">
      <view class="conts_tit">图片集</view>
        <view class="conts_textarea">
          <block wx:if="{{certificateImgs.length != 0}}">
              <block wx:for="{{certificateImgs}}">
                <view class="logoimgs" style="display:inline-block;margin-left:20rpx;">
                  <image src="{{item}}"></image>
                  <text class="icon iconfont icon-off" bindtap="hideImgs" data-imgs="{{item}}" data-index="{{index}}"></text>
                </view>
              </block>
          </block>
          <block wx:if="{{certificateImgs.length < 6}}">
            <image src="../../image/add.png" class="addlogo" bindtap="chooseimgs"></image>
          </block>
        </view>
    </view>

img.js

//点击多图上传
data: {
    certificateImgs:[]，
    
  },
chooseimgs: function(e){
    var that = this;

    wx.chooseImage({
      count:6,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res){
        const tempFilePaths = res.tempFilePaths; // 选择完成后获取选择的所有图片的临时地址
        that.setData({
          pics:tempFilePaths
        });
        that.uploadimg();
      },
     
    })
  },
  uploadimg:function(){//这里触发图片上传的方法
      var that = this;
      var pics=this.data.pics;
      var data = {
        url:'fileimgs',//这里是你图片上传的接口
        path:pics,//这里是选取的图片的地址数组
        newpath:'msgimg'
      };
      app.uploadimg(data,that.getcimgs);
   },
//上传成功之后返回参数
  getcimgs: function(res){
    var sarr = res.split(",");
    sarr.pop();
    this.setData({
      certificateStr:res,
      certificateImgs:sarr
    })
 },
// 隐藏删除多图
hideImgs: function(e){
  var img = e.currentTarget.dataset.imgs; // 获取图片名称
  var index = e.currentTarget.dataset.index; // 获取图片索引
  var certificateImgs = this.data.certificateImgs; // 获取图片数组
  certificateImgs.splice(index,1); // 根据索引移除指定图片
  // 重新赋值
  this.setData({
    certificateImgs:certificateImgs
  })
  wx.showLoading({
    title: '删除中',
  })
  app.getAjax("delImage",{img:img},function(){
    wx.hideLoading();
  });
},

app.js

//app.js
App({
 
  uploadimg: function(data,callbacks){
    var that=this,
    i=data.i?data.i:0,
    success=data.success?data.success:0,
    fail=data.fail?data.fail:0,
    str = data.str?data.str:'';
    wx.uploadFile({
     url: data.url, 
     filePath: data.path[i],
     name: 'files',
     formData:{path:data.newpath},
     success: (resp) => {
      success++;
      // console.log(resp);
      str+=resp.data+',';
      // console.log(i);
      //这里可能有BUG，失败也会执行这里
     },
     fail: (res) => {
      fail++;
      // console.log('fail:'+i+"fail:"+fail);
     },
     complete: () => {
      i++;
     if(i==data.path.length){ //当图片传完时，停止调用   
      console.log('执行完毕');
      console.log('成功：'+success+" 失败："+fail);
      console.log(str)
      callbacks(str);
     }else{//若图片还没有传完，则继续调用函数
      data.i=i;
      data.success=success;
      data.fail=fail;
      data.str=str;
      that.uploadimg(data,callbacks);
     }
     }
    });
   }
})

php

// 图片上传
    public function fileimgs(){
        $files = request()->file("files");
        $path = input('path');
        if($files){
            $info = $files->validate(['size'=>204800000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.$path);
            if($info){
            	//返回新生成图片完整地址
                $newurl = '/uploads/'.$path.'/'.$info->getSaveName();
                $img= str_replace('\\','/',$newurl);
                // return output_data(200,$data);
                return $img;
            }else{
                return $files->getError();
            }
        }
    }
    // 图片删除
    public function delImage(){
        $img = input('post.img');
        $url = substr($img,strpos($img, 'uploads/'));
        unlink(ROOT_PATH.'public'.DS.$url);
        return output_data(200,true);
    }