admin-frontend/src/components/Uploadfile/index.vue

<!--
 * @Author: Gui
 * @Date: 2023-05-12 11:36:28
 * @LastEditors: guicheng 1625811865@qq.com
 * @LastEditTime: 2024-06-20 15:36:35
 * @Description: kxs files
 * @filePath: 
-->
<template>
  <el-button type="primary" @click="clickupload">
    {{ btntext }}
    <slot />
  </el-button>
  <input type="file" id="inputfile" style="display: none" />
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Ossupload from "@/utils/OSSupload";
type Res = {
  uploadurl?: string;
};
const props = defineProps<{
  btntext?: string;
  FilePath: {
    type: Function;
    default: () => {};
  };
}>();
const uploaddo = ref(null);
onMounted(() => {
  uploaddo.value = document.querySelector("#inputfile");
  uploaddo.value.addEventListener("change", function (evt) {
    const file = evt.target.files[0];
    Ossupload(file, "KxsAdmin/UploadFile").then((res: Res) => {
      props.FilePath(res.url);
    });
  });
});
const clickupload = function () {
  uploaddo.value.click();
};
</script>