手写拖动上传组件(Vue3)

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

<script setup lang="ts">
import { reactive, nextTick } from "vue";
import { useMainStore } from "../../../store";
const store = useMainStore();

const props = defineProps<{ accept?: string }>();

const emits = defineEmits<{ (e: "fileChange", value: File): void }>();

const data = reactive({
  borderColor: "#000",
  file: null as File,
  show: true,
});

const handleFile = (file: File) => {
  console.log(file);
  data.file = file;
  emits("fileChange", file);
};

const preventDefaultEvent = (e: DragEvent) => {
  e.preventDefault();
  data.borderColor = "#000";
};

const onDragOver = (e: DragEvent) => {
  console.log("OVER", store.themeColor);
  e.preventDefault();
  data.borderColor = store.themeColor;
};

const onDrop = (e: DragEvent) => {
  data.borderColor = "#000";
  e.stopPropagation();
  e.preventDefault();
  const files = e.dataTransfer.files;
  const file = files[0];
  if (!file) {
    return;
  }
  handleFile(file);
};

const onFileChange = (e: Event) => {
  data.show = false;
  handleFile((e.target as HTMLInputElement).files[0]);
  nextTick(() => {
    data.show = true;
  });
};
</script>

<template>
  <label for="upload-id">
    <div
      class="upload-container flex"
      :style="{ borderColor: data.borderColor }"
      @dragleave="preventDefaultEvent"
      @dragenter="preventDefaultEvent"
      @dragover="onDragOver"
      @drop="onDrop"
      ref="select_frame"
    >
      <p>{{ data.file?.name }}</p>
    </div>
    <input v-if="data.show" @change="onFileChange" :accept="props.accept" style="display: none" type="file" name="" id="upload-id" />
  </label>
</template>

<style scoped lang="less">
@import "../../../assets/style/theme.less";
.upload-container {
  width: 400px;
  height: 200px;
  background-color: #eee;
  border-radius: 6px;
  border: 1px dashed;
}
.upload-container:hover {
  border-color: @primary !important;
}
</style>