<script setup lang="ts">
import Clients from "@/utils/upload";

defineOptions({
  name: "UploadOss"
});

defineProps<{
  drag?: boolean;
  fileList?: [];
}>();

const handleGetOssToken = () => {
  console.log("获取token");
};

const handleBeforeUpload = async (file: File) => {};

const handleUpload = (option: any) => {
  console.log("上传中", option);
  const { file } = option;
  try {
    const client = new Clients();
    console.log(client);
    client
      .put(`${file.name}`, file)
      .then((res: any) => {
        console.log("上传成功", res);
        option.onSuccess(res);
      })
      .catch((err: any) => {
        console.log("上传失败", err);
        option.onError(err);
      });
  } catch (e) {
    console.log(e);
    option.onError(e);
  }
};
</script>

<template>
  <el-upload
    class="upload-demo"
    drag
    action="/"
    :http-request="handleUpload"
    :before-upload="handleBeforeUpload"
    :on-preview="
      file => {
        console.log('preview', file);
      }
    "
    :on-remove="
      (file, fileList) => {
        console.log('remove', file, fileList);
      }
    "
    :before-remove="
      (file, fileList) => {
        return $confirm(`确定移除 ${file.name}？`);
      }
    "
    :file-list="fileList"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>

<style scoped lang="scss"></style>
