<template>
  <view>
    <view class="upload mx-4">
      <view v-if="!showUploadList">
        <view v-for="(item, index) in lists" :key="index">
          <image :src="item.url" mode="aspectFill"></image>
        </view>
      </view>
      <u-upload
        ref="uUpload"
        :show-upload-list="showUploadList"
        :custom-btn="true"
        :action="action"
        :before-upload="beforeUpload"
        max-count="6"
      >
        <view slot="addBtn" class="bgIcon flex justify-center items-center rounded-full" hover-stay-time="150">
          <u-icon name="plus" color="#ffffff" size="48" class="uploadIcon flex justify-center rounded-full"></u-icon>
        </view>
      </u-upload>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      //上传地址
      action: 'http://www.example.com',
      showUploadList: false,
      lists: [],
    };
  },

  onReady() {
    // this.lists = this.refs.uUpload.lists;
    // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
    this.lists = this.$refs.uUpload.lists.filter(val => {
      return val.progress == 100;
    });
    console.log(this.lists);
  },

  methods: {
    beforeUpload() {
      return new Promise((resolve, reject) => {
        this.$u
          .post('url')
          .then(res => {
            console.log(res);
            resolve();
          })
          .catch(err => {
            reject(err);
            console.log(err);
          });
      });
    },
  },
};
</script>
<style lang="scss">
.upload {
  position: relative;
  left: 80%;
  bottom: 25px;
  height: 5px;
}
.one {
  position: relative;
  left: 85%;
  right: 5%;
}
.uploads {
  position: relative;
  width: 50px;
  height: 50px;
}
.uploadIcon {
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  height: 50px;
  width: 50px;
}
.bgIcon {
  background: white;
  height: 50px;
  width: 50px;
}
</style>
