uniapp上传头像和最多上传9张demo效果(整理)

<template>
  <view>
    <!-- //默认显示的 -->
    <image v-if="!imgUrl" :src="require('../../static/nav/icon_me_n.svg')" class="headPhoto"  @tap="openChooseImg"></image>
    <!-- //用户点击修改的 -->
    <image v-else :src="imgUrl" class="headPhoto"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        imgUrl: ""
      };
    },
    methods: {
      openChooseImg() {
        uni.chooseImage({
          count: 1, //最多可选择的张数
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
          success: res => {
            console.log(res, '头像res')
            this.imgUrl = res.tempFilePaths[0] //把选择的头像赋值给imgurl
            console.log(this.imgUrl, 'this.imgUrl')
          }
        });
      },
    },
  };
</script>
<style lang="scss">
  .timeBox {
    margin-top: 50rpx;
  }
</style>

<template>
  <view>
    <view class="row-me row-center font-size30 color090B0D padding-top30 margin-bottom20 margin-left30 margin-right30 ">
      <view class="colorF24444">*</view>
      <view class="font-bold">上传图片（{{photoList.length}}/9）</view>
    </view>
    <view class="houseType">
      <view class="houseImg" v-for="(item,index) in photoList">
        <image :src="item" @click="preViewImg(item)" mode="widthFix" class="img">
        </image>
        <image @click="deletePic(index)" src="../../static/img/delete.png" mode="widthFix"
          class="deleteImg">
        </image>
      </view>
      <view class="addImg flex-center" @click="addPic()" v-if="photoList.length <9">
        <image src="../../static/img/tianjia.png" mode="widthFix" class="img" />
        </image>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        photoList: ""
      };
    },
    methods: {
      //上传图片，户型和房型
      addPic(type) {
        uni.chooseImage({
          count: 1,
          success: (res) => {
            // show('图片上传中...');
            uni.showLoading({
              title: "图片上传中...",
              mask: true,
            })
            console.log(res, '231')
            let tempList = [...this.photoList, ...res.tempFilePaths] //临时显示
            if (tempList.length > 9) {
              //提示用户 最多只能上传9张
              uni.showToast({
                title: '最多只能上传9张图片哦～'
              });
            } else {
              this.photoList = tempList
              uni.hideLoading();
            }
          }
        })
      },
      //删除上传
      deletePic(index) {
        this.photoList.splice(index, 1)
      },
      //点击打开预览
      preViewImg(currentSrc) {
        uni.previewImage({
          current: currentSrc,
          urls: this.photoList //需要预览的图片链接列表  
        })
      },
    },
  };
</script>
<style lang="scss">
  .houseType {
    overflow: hidden;
    .houseImg {
      width: 195rpx;
      height: 195rpx;
      border: 1rpx solid #ECECEC;
      border-radius: 10rpx;
      position: relative;
      float: left;
      /* margin-right: 15rpx; */
      margin-bottom: 20rpx;
      margin-left: 25rpx;
      .img {
        width: 195rpx !important;
        height: 195rpx !important;
      }
      .deleteImg {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
      }
    }
    .addImg {
      width: 196rpx;
      height: 196rpx;
      background: #F6F6F6;
      margin-bottom: 20rpx;
      float: left;
      margin-left: 25rpx;
      .img {
        width: 196rpx;
        height: 196rpx;
      }
    }
  }
</style>