微信小程序开发之图片上传，展示，放大预览

1.效果图

2.图一为效果图，，图2为放大效果图

3.支持批量上传，支持删除，预览功能 

4.代码：wxml

 
    
        
        一键上传
    
    
        
        
    
 

5.主要wxss样式，根据自己需要来调整

#photoPic{
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.show-image{
    width: 190rpx;
    height: 190rpx;
    margin:20rpx;
}
.show-imager{
    width: 190rpx;
    height: 190rpx;
    margin:20rpx;
    background-color: #E3E8F2;
    position: relative;
}
.delete-image{
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
}
#upPic{
    position: absolute;
    top: 120rpx;
    left: 34rpx;
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #0C264E;
    text-align: center;
    font-weight: 400;
}
#leftpic{
    margin:40rpx 62rpx;
    width: 62rpx;
    height: 62rpx;
}

6. js代码

// 上传方法 
gotoShow(){
        // 状态only 判断是否可以上传的，为0直接return出去
        if(this.data.only == 0){
            return
        }
        var _this = this
        wx.chooseImage({
         count: 9, // 最多可以选择的图片张数，默认9
         sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
         soure: ['ceTypalbum', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
         success: function(res){
            //  对上传文件的格式进行校验
             var picType = false
             for(var i= 0; i< res.tempFilePaths.length; i++){
                if(res.tempFilePaths[i].includes('.png') || res.tempFilePaths[i].includes('.jpg') || res.tempFilePaths[i].includes('.jpeg') || res.tempFilePaths[i].includes('.gif')){
                    picType = true
                 }else{
                    picType = false
                    break
                 }
             }
         if( !picType){
             wx.showToast({
                 title:'支持.png/ .jpg/ .jpeg/ .gif 格式图片',
                 icon:'none'
             })
             return
         }
         const srcer =  [..._this.data.src,...res.tempFilePaths]
         _this.setData({
          src:srcer
         })
          //  也可以在这里加上上传的loading，在数组_this.data.src.length -1 与循环的index相等时关闭loading
        //  循环上传图片
        _this.data.src.forEach(item=>{
            wx.uploadFile({
                url: baseURL + '/common/upload',
                filePath: item,
                header:{ Authorization: 'Bearer' + wx.getStorageSync('token') },
                name: 'file',
                success (res){
                    console.log('888');
                  const arr = _this.data.annexPic
                  arr.push(JSON.parse(res.data).url)
                  _this.setData({
                    annexPic:arr
                  })
                  console.log(arr,_this.data.annexPic);
                }
              })
        })
         },
         fail: function() {
         // fail
         },
         complete: function() {
         // complete
         }
        })
    },
 // 大图预览
    viewPic(e){
            wx.previewImage({
                current: e.currentTarget.dataset.item, // 当前显示图片的 http 链接
                urls: this.data.src // 需要预览的图片 http 链接列表
              })
        
    },
    // 删除照片
    deletePic(e){
// 这里在查看的时候没处理wxml，在这里做了限制，查看点击直接return
        if(this.data.only == '0'){
            return
        }
        const srcer = this.data.src
        srcer.splice(e.currentTarget.dataset.index,1)
        this.setData({
            src:srcer
        })
    },

7.上面代码命名和变量有点混乱，根据自己需求来写，不要在意，主要是为了j如果有问题还请指正，谢谢！！！ 

8.补充，貌似wx.chooseimage不维护了(但是还可以用)，可以换为wx.chooseMedia，返回的数据格式就有了变化，需要修改下代码

gotoShow(){
        // 状态only 判断是否可以上传的，为0直接return出去
        if(this.data.only == 0){
            return
        }
        var _this = this
        wx.chooseMedia({
         count: 9, // 最多可以选择的图片张数，默认9
         sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
         soureType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
         success: function(res){
            //  对上传文件的格式进行校验
            console.log(res);
             var picType = false
             let pathArr = []
             for(var i= 0; i< res.tempFiles.length; i++){
                if(res.tempFiles[i].tempFilePath.includes('.png') || res.tempFiles[i].tempFilePath.includes('.jpg') || res.tempFiles[i].tempFilePath.includes('.jpeg') || res.tempFiles[i].tempFilePath.includes('.gif')){
                    picType = true
                    pathArr.push(res.tempFiles[i].tempFilePath)
                 }else{
                    picType = false
                    break
                 }
             }
         if( !picType){
             wx.showToast({
                 title:'支持.png/ .jpg/ .jpeg/ .gif 格式图片',
                 icon:'none'
             })
             return
         }
         const srcer =  [..._this.data.src,...pathArr]
         _this.setData({
          src:srcer
         })
          //  也可以在这里加上上传的loading，在数组_this.data.src.length -1 与循环的index相等时关闭loading
        //  循环上传图片
        _this.data.src.forEach(item=>{
            wx.uploadFile({
                url: baseURL + '/common/upload',
                filePath: item,
                header:{ Authorization: 'Bearer' + wx.getStorageSync('token') },
                name: 'file',
                success (res){
                    console.log('888');
                  const arr = _this.data.annexPic
                  arr.push(JSON.parse(res.data).url)
                  _this.setData({
                    annexPic:arr
                  })
                  console.log(arr,_this.data.annexPic);
                }
              })
        })
         },
         fail: function() {
         // fail
         },
         complete: function() {
         // complete
         }
        })
    },