TUI

<template>
  <div class="component-card-demo-wrap">
    <TsUpload width="200px" />
    <TsUpload width="200px" text="根据你的业务自定义" filekm="2M" :limit="3" />
  </div>
</template>

<script setup lang="ts">
import { TsUpload } from 'tui';
</script>

<template>
  <TsButton :style="{ marginBottom: '8px' }" @click="handleClearFile">重置上传</TsButton>
  <TsUpload :limit="5" mode="thumbnail" width="150" :dropZone="true" fit="cover" ref="thumbnailUploadRef" @error="getUploadError" @onChange="handleThumbnailFile" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsToast, TsUpload } from 'tui';

const thumbnailUploadRef = ref<typeof TsUpload>();

const handleClearFile = () => thumbnailUploadRef.value?.clearFiles();

const getUploadError = (text: string) => {
  TsToast({
    type: 'error',
    message: text || '上传失败',
  });
};

const handleThumbnailFile = (files: File[]) => {
  console.log(files);
};
</script>

<template>
  <TsUpload :dropZone="true" width="100%" @error="getUploadError">
    <div class="component-demo-upload-content">拖动文件到此处上传</div>
  </TsUpload>
</template>

<script setup lang="ts">
import { TsToast, TsUpload } from 'tui';

const getUploadError = (text: string) => {
  TsToast({
    type: 'error',
    message: text || '上传失败',
  });
};
</script>

<style scoped>
.component-demo-upload-content {
  color: var(--ts-upload-thumbnail-color);
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 1px dashed var(--ts-upload-thumbnail-border-color);
  border-radius: var(--ts-radius);
  line-height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.component-demo-upload-content:hover {
  border-color: var(--ts-color-blue);
  color: var(--ts-color-blue);
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsUpload @getBase64="handleGetBase64" width="121" :previewable="false" resetable>
      <TsAvatar :src="avatarUrl" isUpload width="100%" @error="onError">
        <template #fallback>
          <div class="fallback-wrap" :class="errorClass">点击上传</div>
        </template>
      </TsAvatar>
    </TsUpload>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { TsAvatar, TsUpload } from 'tui';

const avatarUrl = ref('');
const errorClass = ref('');

const handleGetBase64 = (data: string | ArrayBuffer | null) => {
  avatarUrl.value = data as string;
};

const onError = () => {
  if (errorClass.value === 'fallback-error') {
    errorClass.value = '';
    nextTick(() => {
      errorClass.value = 'fallback-error';
    });
  } else {
    errorClass.value = 'fallback-error';
  }
};
</script>