小程序上传文件跟图片

1.wxml

<view class="ticket-shopping" bindtap="changeIsShow">
          <view class="ticket-info">
            <view class="ticket-titleInfo">采购小票</view>
            <text>·请上传购物票据或截图，每张照片仅限一张票据，每次上传不超过9张\n ·上传的小票会人工审核，请保证票据和填写的内容一致</text>
            <view class="ticket-img">
              <view wx:for="{
   
   {ticketImgList}}" wx:key="index" >
                <view class="ticket-boxUploadImg">
                  <image class="ticket-imgCover" src="{
   
   {item.tempFilePath}}" data-index="{
   
   {index}}"bindtap="previewBigImage"></image>
                  <!-- <image class="ticket-imgClose" src="{
   
   {base_img_url}}loading/icon_kv.png"></image> -->
                  <!-- <view data-index="{
   
   {index}}" class="ticket-imgClose" bindtap="delImg">X</view> -->
                </view>
              </view>
              <view class="ticket-imgbox" bindtap="selectImg" wx:if="{
   
   {isSelect}}">
                <view></view>
                <view></view>
              </view>
            </view>
          </view>
          <view class="ticket-info">
            <view class="ticket-titleInfo">物流单据</view>
            <text>·请上传物流单据照片或截图，每张照片仅限一张票据，每次上传不超过9张</text>
          </view>
          <view class="ticket-img">
              <view wx:for="{
   
   {ticketImg}}" wx:key="index" >
                <view class="ticket-boxUploadImg">
                  <image class="ticket-imgCover" src="{
   
   {item.tempFilePath}}" data-index="{
   
   {index}}"bindtap="previewImage"></image>
                  <!-- <image class="ticket-imgClose" src="{
   
   {base_img_url}}loading/icon_kv.png"></image> -->
                  <!-- <view data-index="{
   
   {index}}" class="ticket-imgClose" bindtap="delImgs">X</view> -->
                </view>
              </view>
              <view class="ticket-imgbox" bindtap="select" wx:if="{
   
   {isSelect}}">
                <view></view>
                <view></view>
              </view>
            </view>
        </view>

2.wxss

.ticket-shopping {
  width: 100%;
  margin-top: 30rpx;
}

.ticket-info view {
  font-size: 24rpx;
  color: #404040;
  font-family: 'FZZhunYuan-director';
}

.ticket-info text {
  font-size: 20rpx;
  color: #878787;
  display: flex;
  flex-direction: column;
  margin-top: 12rpx;
  box-sizing: border-box;
  font-family: 'FZZhunYuan-director';
}

.ticket-img {
  display: flex;
  margin: 16rpx 0 40rpx 0;
}

.ticket-boxUploadImg{
  margin-right: 16rpx;
  position: relative;
}

.ticket-img .ticket-imgCover {
  width: 112rpx;
  height: 112rpx;
  background: #FEFEFE;
  border-radius: 10rpx;
  border: 2px solid #E3E6E5;
}

.ticket-imgClose {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  text-align: center;
  border-radius: 50%;
  opacity: 0.5;
  background-color: #ccc;
}

.ticket-imgbox {
  width: 112rpx;
  height: 112rpx;
  background: #FEFEFE;
  border-radius: 10rpx;
  border: 2rpx dashed #E3E6E5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ticket-imgbox view {
  width: 70rpx;
  height: 4rpx;
  background: #E3E6E5;
  margin: 0 auto;
}

.ticket-imgbox view:last-child {
  transform: rotate(90deg);
}

.ticket-userName {
  margin-top: 16rpx;
  font-size: 20rpx;
  height: 24rpx;
  line-height: 24rpx;
}

.ticket-userName view {
  color: #404040;
  margin-bottom: 12rpx;
}

.ticket-userName text {
  color: #878787;
}

.ticket-userName input {
  width: 100%;
  height: 64rpx;
  border-radius: 8rpx;
  border: 2rpx solid #E3E6E5;
  margin-bottom: 16rpx;
  padding: 0 16rpx;
}

.ticket-image {
  width: 112rpx;
  height: 112rpx;
  background: #FEFEFE;
  border-radius: 10rpx;
  border: 2rpx solid #E3E6E5;
  display: flex;
  align-items: center;
  margin-top:12rpx;
}

.ticket-image image {
  width: 112rpx;
  height: 80rpx;
}

.ticket-submit {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* height: 116rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  padding: 18rpx 32rpx;
}

.ticket-operate {
  width: 50%;
  display: flex;
  justify-content: space-around;
}

.ticket-operator {
  display: flex ;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.ticket-operator:nth-child(1) {
  border-right: 2rpx solid #E3E6E5;
}

.ticket-operator view {
  font-size: 20rpx;
  color: #878787;
  margin-top: 8rpx;
  font-family: 'FZZhunYuan-director';
}

.ticket-operator image {
  width: 48rpx;
  height: 48rpx;
}

.ticket-btn {
  width: 270rpx;
  height: 80rpx;
  line-height: 84rpx;
  background: #672074;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #FFFFFF;
  font-family: 'FZZhunYuan-director';
}

3.js

data:{
    ticketImg:[],
}

    //物流单据选择照片
    select(){
      let that = this
      // if(this.data.ticketImg.length>=3){
      //   wx.showToast({
      //     icon:'none',
      //     title: '最多上传3张图片',
      //   })
      //   return
      // }
      wx.chooseMedia({
        count: 9,
        mediaType: ['image','video'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success(res) {
          let ticketImg = that.data.ticketImg.concat(res.tempFiles)
          if(ticketImg.length>9){
            wx.showToast({
              icon:'none',
              title: '超出上传图片最大限制',
            })
            ticketImg = ticketImg.splice(0,9)
          }
          that.setData({
            ticketImg : ticketImg,
            isSelect: ticketImg.length >= 9 ? false : true
          })
          console.log(that.data.ticketImg,'333333');
          console.log(res.tempFiles)
        }
      })
    },
    //移除照片
    delImgs(e){
      console.log(e.currentTarget.dataset.index);
      let index = e.currentTarget.dataset.index
      this.data.ticketImg.splice(index,1)
      this.setData({
        ticketImg: this.data.ticketImg,
        isSelect: this.data.ticketImg.length > 9 ? false : true
      })
    },
    // 预览图片
    previewImage(e) {
      let imgs = [];
      this.data.ticketImg.forEach(item=>{
        imgs.push(item.tempFilePath)
      })
      let {index} = e.currentTarget.dataset;
      wx.previewImage({
        //当前显示图片
        current: imgs[index],
        //所有图片
        urls: imgs
      })
    },