base-front-framework/src/components/UploadOss/index.vue

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

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"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>

<style scoped lang="scss">

</style>