小程序实现上传图片可以放大预览和删除

上传图片的主要样式和代码截图 

 

弹框里面全部代码 

 <view class="model_wai" wx:if="{{updateImgsModel}}"></view>
 <view class="tk_wai" wx:if="{{updateImgsModel}}">
   <view class="tk_model">
    <view class="chacha_size" @tap="imgsClose">×</view>
    <view class="tuidanTxt"> 上传打款凭证</view>
<view class="Tips">请上传您的打款凭证，最多允许上传3张
  <span class="TipsRed">非必填</span></view>
  <view class="weui-uploader">
       <view class='pics' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
              <image   src="{{item}}" data-index="{{index}}" mode="aspectFill" @tap.stop="previewImg">
                <view class="close_upload" @tap.stop="deleteImg2" data-index="{{index}}">
                  <view class="close2 icon"></view>
                </view>
              </image>
            </view>
            <view class="{{imgs.length<3?'':'hide'}}" bindtap="chooseImg">
              <view class="tp_add">+</view>
            </view>
     </view>
     <view class="jz_btn martop">
     <view class="small_btn_blue">确认打款</view>
    </view>
      </view>
 </view>


<script>
import uploadImg from '../../utils/upload'
import axios2 from '@/utils/http2'
  export default class orderTrackDetail extends wepy.page {
    config = {
      navigationBarTitleText: '订单详情',

    }
    components = {

    }

    data = {
 updateImgsModel:true,//上传图片弹框
  imgs: [],
}

    methods = {

      //关闭当前弹窗
    imgsClose(){
    this.updateImgsModel=false
    this.$apply();
    },

      // 删除图片
        deleteImg2(e) {
      var imgs = this.imgs
      var index = e.currentTarget.dataset.index
      imgs.splice(index, 1)
      this.imgs = imgs
      console.log(this.imgs, 'ims')
      this.$apply()
    },
      // 预览图片
    previewImg(e) {
      //获取当前图片的下标
      var index = e.currentTarget.dataset.index
      //所有图片
      var imgs = this.imgs
      wx.previewImage({
        //当前显示图片
        current: imgs[index],
        //所有图片
        urls: imgs,
      })
    },
       // 上传图片
      chooseImg(e) {
      var that = this
      var imgs = this.imgs
      if (imgs.length > 3) {
        wx.showToast({
          title: '最多可上传3张',
          icon: 'none',
          duration: 2000,
        })
        return false
      }
      wx.chooseImage({
        // count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths
          var imgs = that.data.imgs
          for (var i = 0; i < tempFilePaths.length; i++) {
            var imglen = tempFilePaths.length + imgs.length
            console.log(imglen, 'imglen')
            if (imglen > 3) {
              wx.showToast({
                title: '最多可上传3张',
                icon: 'none',
                duration: 2000,
              })
              that.$apply()
              return false
            } else {
              uploadImg(res.tempFilePaths[i], (url) => {
                that.imgs.push(url)
                console.log(that.imgs, 'imgs')
                that.$apply()
              })
            }
          }
        },
      })
    },

  }
</script>



<style lang="less">

// ------------弹框
.model_wai {
  z-index: 1000;
  min-height: 100%;
  width: 750rpx;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #000;
  opacity: 0.6;
}
.tk_wai {
  position: relative;
  display: flex;
  justify-content: center;
  .tk_model {
    position: relative;
    border-radius: 15rpx;
    padding-top: 40rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 60rpx;
    position: fixed;
    top: 320rpx;

    width: 700rpx;
    background: white;
    z-index: 1001;
  }
}
.chacha_size {
  font-size: 65rpx;
  position: absolute;
  right: 25rpx;
  top: 0rpx;
}

// -----------
.tuidanTxt{
  color: rgba(16, 16, 16, 1);
font-size: 32rpx;
display: flex;
justify-content: center;
}
.txtareaWai {
  margin-top: 18rpx;
  border: 1px solid #edf0f4;
}
.txtarea {
        color: #333;
        // border: 1px solid #ccc;
        border-radius: 4rpx;
        padding: 15rpx;
        padding-bottom: 5rpx;
        height: 150rpx;
        width: 630rpx;
      }

.small_btn_blue{
  width: 160rpx;
height: 70rpx;
border-radius: 8rpx;
background-color: rgba(42, 103, 234, 1);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.jz_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

这里把本地图片上传到服务器的接口放utils里了

upload.js代码，可按后端接口命名修改

import axios from '@/utils/http'
import env from '@/env'

function uploadImg(tempFilePath, callback) {
    // key = 图片目录 + 随机文件名 + 原文件后缀

    let pathArr = tempFilePath.split('.')
    let suffix = pathArr[pathArr.length - 1]

    let fileRandName = Date.now() + '' + parseInt(Math.random() * 1000)
    let fileName = fileRandName + '.' + suffix

    let date = new Date()
    let ossPath = 'yln-card/' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    let fileKey = ossPath + '/' + fileName

    axios.get('/oss/get_oss_signature').then(data => {
        wx.uploadFile({
            url: env.aliyunServerURL,
            filePath: tempFilePath,
            name: 'file',
            formData: {
                name: tempFilePath,
                key: fileKey,
                OSSAccessKeyId: env.OSSAccessKeyId,
                policy: data.encodedPolicy,
                signature: data.postSignature,
                success_action_status: "200"
            },
            success: function (res) {
                let ossUrl = env.aliyunServerURL + '/' + fileKey
                console.log(ossUrl)
                res.statusCode == 200 && callback(ossUrl)
            }
        })
    })
}
export default uploadImg