Basic Usage (基本使用)

点击上传文件

<script setup lang="ts">
import { ref } from "vue";

const file = ref<File>();

function formatFileSize(bytes: number) {
  if (bytes === 0) {
    return "0 B";
  }
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB", "TB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / k ** i).toFixed(2)} ${sizes[i]}`;
}
</script>

<template>
  <hi-file-upload v-model="file" class="w-full max-w-360px">
    <div class="flex flex-col items-center justify-center h-180px border-2 border-dashed border-gray-200 rounded-lg cursor-pointer transition-colors duration-300 hover:border-indigo-500">
      <div v-if="!file">
        <i class="hi-icon-upload text-32px text-gray-500" />
        <div class="mt-3 text-gray-500">
          点击上传文件
        </div>
      </div>
      <div v-else class="text-center">
        <div class="text-gray-900 font-medium mb-1">
          {{ file.name }}
        </div>
        <div class="text-gray-500 text-14px">
          {{ formatFileSize(file.size) }}
        </div>
      </div>
    </div>
  </hi-file-upload>
</template>

Multiple Upload (多文件上传)

点击上传多个文件

<script setup lang="ts">
import { ref } from "vue";

const files = ref<File[]>([]);

function formatFileSize(bytes: number) {
  if (bytes === 0) {
    return "0 B";
  }
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB", "TB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / k ** i).toFixed(2)} ${sizes[i]}`;
};
</script>

<template>
  <hi-file-upload v-model="files" multiple class="w-full max-w-360px">
    <div class="p-4 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer transition-colors duration-300 hover:border-indigo-500">
      <div v-if="files.length === 0">
        <i class="hi-icon-upload text-32px text-gray-500 block text-center" />
        <div class="mt-3 text-gray-500 text-center">
          点击上传多个文件
        </div>
      </div>
      <div v-else class="flex flex-col gap-2">
        <div v-for="file in files" :key="file.name" class="p-3 bg-gray-50 rounded-md">
          <div>
            <div class="text-gray-900 font-medium mb-1">
              {{ file.name }}
            </div>
            <div class="text-gray-500 text-14px">
              {{ formatFileSize(file.size) }}
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center p-3 text-indigo-500 bg-gray-50 rounded-md mt-2">
          <i class="hi-icon-plus mr-2" />
          <span>继续添加</span>
        </div>
      </div>
    </div>
  </hi-file-upload>
</template>

File Type Restriction (文件类型限制)

点击上传图片

支持 jpg、png 格式

<script setup lang="ts">
import { ref, watch } from "vue";

const imageFile = ref<File>();
const imagePreview = ref<string>("");

watch(imageFile, (file) => {
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imagePreview.value = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  } else {
    imagePreview.value = "";
  }
});

function formatFileSize(bytes: number) {
  if (bytes === 0) {
    return "0 B";
  }
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB", "TB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / k ** i).toFixed(2)} ${sizes[i]}`;
};
</script>

<template>
  <div class="w-full max-w-360px">
    <hi-file-upload
      v-model="imageFile"
      accept=".jpg,.jpeg,.png"
      class="w-full"
    >
      <div class="flex flex-col items-center justify-center h-200px border-2 border-dashed border-gray-200 rounded-lg cursor-pointer transition-colors duration-300 hover:border-indigo-500">
        <div v-if="!imageFile">
          <i class="hi-icon-image text-32px text-gray-500" />
          <div class="mt-3 text-gray-500">
            点击上传图片
          </div>
          <div class="mt-1 text-gray-400 text-14px">
            支持 jpg、png 格式
          </div>
        </div>
        <div v-else class="w-full h-full flex flex-col items-center justify-center p-4">
          <img
            :src="imagePreview"
            class="max-w-full max-h-120px object-contain rounded"
            alt="预览图"
          >
          <div class="mt-3 text-center">
            <div class="text-gray-900 font-medium mb-1">
              {{ imageFile.name }}
            </div>
            <div class="text-gray-500 text-14px">
              {{ formatFileSize(imageFile.size) }}
            </div>
          </div>
        </div>
      </div>
    </hi-file-upload>
  </div>
</template>

FileUpload Props (参数)

名称	类型	默认值	说明
modelValue	File | File[]	[]	已选择的文件，支持 v-model 绑定
multiple	boolean	false	是否支持多文件上传
accept	string	'*/*'	接受的文件类型，例如 '.jpg,.png'
as	string	'div'	包装元素的标签名

FileUpload Events (事件)

名称	参数	说明
update:modelValue	(value: File | File[])	文件选择更新时触发
change	(value: File | File[])	文件选择变化时触发

FileUpload Slots (插槽)

名称	参数	说明
default	{ files: File[] }	自定义上传区域的内容，files 参数包含当前已选择的文件列表