tall-mui-3-project/src/components/Upload/Upload.vue

<template>
  <view class="upload">
    <view @tap="handleUpload">
      <u-icon name="plus" color="#ffffff" size="24px" class="flex justify-center rounded-full upload-icon"></u-icon>
    </view>

    <!-- <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="flex items-center justify-center rounded-full bg-icon" hover-stay-time="150">
        <u-icon name="plus" color="#ffffff" size="24px" class="flex justify-center rounded-full upload-icon"></u-icon>
      </view>
    </u-upload> -->
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },

  methods: {
    async handleUpload() {
      try {
        const data = await this.$u.api.import();
        // TODO:
        console.log('data: ', data);
      } catch (error) {
        this.$t.ui.showToast(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload {
  position: absolute;
  right: 10px;
  bottom: 0;
  transform: translate3d(0, 50%, 0);
}

.upload-icon {
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  height: 50px;
  width: 50px;
}
.bg-icon {
  background: white;
  height: 50px;
  width: 50px;
}
</style>