前端手写文件上传；使用input实现文件拖动上传

使用input实现文件拖动上传

vue2代码：

<template>
  <div>
    <div class="drop-area" @dragenter="highlight" @dragover="highlight" @dragleave="unhighlight" @drop="handleDrop"
      @click="handleClick">
      将文件拖拽到此处或者点击上传
      <input type="file" ref="fileInput"  accept=".png,.jpg,.jpeg,.pdf" @change="handleFiles" multiple style="display: none;">
    </div>
    <ul v-if="fileList.length">
      <li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li>
    </ul>
    <pre>{{ fileList }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    highlight(e) {
      e.preventDefault();
      e.stopPropagation();
      e.target.classList.add('hover');
    },
    unhighlight(e) {
      e.target.classList.remove('hover');
    },
    handleDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      this.unhighlight(e);
      const files = e.dataTransfer.files;
      console.log('拖拽得到List', e);
      // this.handleFiles(files);
      for (let i = 0; i < files.length; i++) {
        this.fileList.push({
          ...files[i],
          name: files[i].name,
          size: files[i].size,
          type: files[i].type
        });
      }
      this.uploadFile()
    },
    handleClick() {
      this.$refs.fileInput.click();
    },
    handleFiles(e) {
      console.log(11, e);
      const files = e.target.files || e;
      for (let i = 0; i < files.length; i++) {
        this.fileList.push({
          ...files[i],
          name: files[i].name,
          size: files[i].size,
          type: files[i].type
        });
      }
      this.uploadFile()
    },
    // 上传文件
    uploadFile() {
      console.log('this.fileList', this.fileList);
    }
  }
};
</script>

<style>
.drop-area {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
}

.drop-area.hover {
  border-color: #11716f;
}

.drop-area:hover {
  border-color: #11716f;
}
</style>

vue3代码：

<template>
  <div>
    <div class="drop-area" @dragenter="highlight" @dragover="highlight" @dragleave="unhighlight" @drop="handleDrop"
      @click="handleClick">
      将文件拖拽到此处或者点击上传
      <input type="file" ref="fileInput" accept=".png,.jpg,.jpeg,.pdf" @change="handleFiles" multiple style="display: none;">
    </div>
    <ul v-if="fileList.length">
      <li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li>
    </ul>
    <pre>{{ fileList }}</pre>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);
    const fileInput = ref(null);

    const highlight = (e) => {
      e.preventDefault();
      e.stopPropagation();
      e.target.classList.add('hover');
    };

    const unhighlight = (e) => {
      e.target.classList.remove('hover');
    };

    const handleDrop = (e) => {
      e.preventDefault();
      e.stopPropagation();
      unhighlight(e);
      const files = e.dataTransfer.files;
      for (let i = 0; i < files.length; i++) {
        fileList.value.push({
          ...files[i],
          name: files[i].name,
          size: files[i].size,
          type: files[i].type
        });
      }
      uploadFile();
    };

    const handleClick = () => {
      console.log(fileInput.value);
      fileInput.value.click(); // 使用 ref 的 value 直接访问 DOM 元素
    };

    const handleFiles = (e) => {
      const files = e.target.files || e;
      for (let i = 0; i < files.length; i++) {
        fileList.value.push({
          ...files[i],
          name: files[i].name,
          size: files[i].size,
          type: files[i].type
        });
      }
      uploadFile();
    };

    // 上传文件
    const uploadFile = () => {
      console.log('fileList', fileList.value);
    };

    return {
      fileList,
      highlight,
      unhighlight,
      handleDrop,
      handleClick,
      handleFiles,
      fileInput
    };
  }
};
</script>

<style>
.drop-area {
  width: 440px;
  height: 185px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  text-align: center;
  line-height: 185px;
  cursor: pointer;
}

.drop-area.hover {
  border-color: #11716f;
}

.drop-area:hover {
  border-color: #11716f;
}
</style>