Upload 上传

import { Upload } from "@reglow/reui";
import type { UploadFile } from "@reglow/reui";

<script setup>
import { Upload } from "@reglow/reui";
</script>

<template>
  <Upload action="https://api.example.com/upload">
    <button class="px-4 py-2 rounded-md border bg-background text-sm">
      点击上传
    </button>
  </Upload>
</template>

<script setup>
const defaultFileList = [
  {
    uid: "1",
    name: "image.png",
    status: "success",
    url: "/image.png",
    thumbUrl: "/image.png",
  },
];
</script>

<template>
  <Upload
    action="/api/upload"
    list-type="picture"
    :default-file-list="defaultFileList"
    :limit="6"
  />
</template>

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

const fileList = ref([
  { uid: "1", name: "file.jpeg", status: "success", size: 130000, thumbUrl: "/file.jpeg" },
]);

const onChange = ({ fileList: newList }) => {
  fileList.value = newList;
};
</script>

<template>
  <Upload
    v-model:file-list="fileList"
    action="/api/upload"
    list-type="picture"
    @change="onChange"
  />
</template>

<template>
  <Upload action="/api/upload" multiple>
    <div class="w-80 h-32 flex flex-col items-center justify-center border-2 border-dashed rounded-lg text-muted-foreground hover:bg-accent/30 cursor-pointer">
      <UploadCloud class="size-8 mb-2" />
      <span class="text-sm">点击或拖拽文件到此处上传</span>
    </div>
  </Upload>
</template>

<script setup>
const customRequest = ({ file, onSuccess, onProgress, onError }) => {
  const formData = new FormData();
  formData.append("file", file);

  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      onProgress({ percent: Math.round((e.loaded / e.total) * 100) });
    }
  };
  xhr.onload = () => {
    if (xhr.status === 200) {
      onSuccess(JSON.parse(xhr.responseText));
    } else {
      onError(new Error("上传失败"));
    }
  };
  xhr.open("POST", "/api/custom-upload");
  xhr.send(formData);
};
</script>

<template>
  <Upload action="" :custom-request="customRequest">
    <button class="px-4 py-2 rounded-md border text-sm">自定义上传</button>
  </Upload>
</template>

<script setup>
const beforeUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  if (!isImage) {
    alert("只能上传图片文件");
    return false;
  }
  return true;
};
</script>

<template>
  <Upload action="/api/upload" :before-upload="beforeUpload">
    <button class="px-4 py-2 rounded-md border text-sm">上传图片</button>
  </Upload>
</template>

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

const uploadRef = ref();
const fileList = ref([]);
</script>

<template>
  <Upload
    ref="uploadRef"
    action="/api/upload"
    :auto-upload="false"
    v-model:file-list="fileList"
  >
    <button class="px-4 py-2 rounded-md border text-sm">选择文件</button>
  </Upload>

  <button @click="() => fileList.forEach(f => uploadRef?.uploadFile?.(f))">
    开始上传
  </button>
</template>

<template>
  <Upload
    action="/api/upload"
    :max-size="5120"
    :min-size="10"
    @size-error="(file) => alert(`${file.name} 大小不符合要求`)"
  >
    <button class="px-4 py-2 rounded-md border text-sm">上传（10KB ~ 5MB）</button>
  </Upload>
</template>