3分钟实现上传拖拽功能

3分钟实现上传拖拽功能

首先让我们看看用到了那些属性

1. accept

一个 HTML 属性，用于指定可接受的文件类型或 MIME 类型，通常用于文件上传的 元素,用于限制用户在文件选择对话框中可以选择的文件类型或 MIME 类型。这有助于提供更好的用户体验，并在前端对文件类型进行初步筛选

2. change

change 事件在表单元素的值发生改变时被触发，可以用于处理用户对表单元素的交互操作,通常与表单元素（如 , , 等）一起使用。需要注意的是，change 事件通常在表单元素失去焦点（blur）时触发，而不是实时地监测值的变化。

3. dragover

JS原生事件，用于处理拖放操作中的"悬停"（hover）事件。当拖动元素在目标元素上方悬停时，dragover 事件将被触发。具体来说，当一个元素被拖动时，可以将其拖动到其他元素上方，这时候会触发目标元素的 dragover 事件。通过在 dragover 事件的处理程序中编写代码，可以控制拖放操作时的行为。dragover 事件的默认行为是不允许在目标元素上方放置拖动的元素。这意味着如果不阻止默认行为，拖动的元素将无法在目标元素上方放置。因此，在处理 dragover 事件时，通常需要使用 event.preventDefault() 方法阻止默认行为。在Vue里面我们可以用事件修饰符.prevent

4. drop

同样也是JS原生事件，用于处理拖放操作中的"放置"（drop）事件。当拖动的元素在目标元素上方释放时，drop 事件将被触发。drop 事件在拖动的元素释放并放置到目标元素上方时被触发。通过在 drop 事件的处理程序中编写代码，可以处理放置操作，即在目标元素上方放置拖动的元素之后的行为,和dragover一起使用drop 事件的默认行为和dragover一样也不允许在目标元素上方放置拖动的元素。这意味着如果不阻止默认行为，拖动的元素将无法在目标元素上方放置。因此，在处理 drop 事件时，通常需要使用 event.preventDefault() 方法阻止默认行为。在Vue里面我们也可以用事件修饰符.prevent

拖拽上传的实现 这里只写了拖拽上传和选择上传的事件处理函数

<el-dialog
    width="500px"
    title="员工导入"
    :visible="showExcelDialog"
    @close="$emit('update:showExcelDialog', false)"
  >
    <el-row type="flex" justify="center">
      //拖拽上传
      <div
        class="upload-excel"
        @dragover.prevent //dragover事件 
        @drop.prevent="hDrop" //drop事件
      >
        // input 表单
        <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx"
          @change="doAdd"
        >
        <div class="drop">
          <i class="el-icon-upload" />
          <el-button type="text" @click="getTemp">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button type="text" @click="Hsave">点击上传</el-button>
          </span>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end">
     // update:props属性名，值 直接修改 .sync修饰符的属性值 
      <el-button size="mini" type="primary" 		      
@click="$emit('update:showExcelDialog',false)">取消</el-button>
    </el-row>
  </el-dialog>

  export default {
  // 拖拽上传
    async hDrop(e) {
      const fd = new FormData()
      fd.append('file', e.dataTransfer.files[0])
      await addExcel(fd)
      this.$emit('update:showExcelDialog', false)
      this.$emit('updateEmployees')
      this.$message.success('上传成功')
    },
  // 选择上传
    async doAdd(e) {
      const fd = new FormData()
      fd.append('file', e.target.files[0])
      await addExcel(fd)
      this.$emit('update:showExcelDialog', false)
      this.$emit('updateEmployees')
      this.$message.success('上传成功')
    }
  }

这里方便阅读性拆分为两个事件 分别是拖拽上传和点击上传

存在的坑

在获取事件对象属性files的时候, change和drop事件,返回的是不一样的 在change事件返回的事件对象里拿到flies要通过event.target.Files[0]来拿到 而drop则完全不一样要通过 event.dataTransfer.files[0]来拿到Files.

drop返回的Files数据

change返回的Files数据

那为什么会这样呢

后来查询资料,是因为在拖放操作中，drop 事件提供了 event.dataTransfer 属性，该属性包含有关拖放操作的数据传输信息。其中，event.dataTransfer.files 是一个文件列表（FileList），表示拖放的文件。通过索引访问 event.dataTransfer.files，可以获取到拖放的文件对象。因此，在 drop 事件处理程序中，使用 event.dataTransfer.files[0] 可以获取拖放的第一个文件对象。

而在文件上传的场景中，change 事件触发时，event.target 指向了文件上传的 元素本身。通过访问 event.target.files 属性，可以获取用户选择的文件列表（FileList），而通过索引访问 event.target.files 可以获取到所选的文件对象。因此，在文件上传的 change 事件处理程序中，使用 event.target.files[0] 可以获取用户选择的第一个文件对象。

这种差异是由于拖放操作和文件上传操作的不同特性所导致的。拖放操作可能涉及多个文件的拖动和放置，因此提供了 event.dataTransfer.files 以获取整个文件列表。而文件上传操作通常是通过文件选择对话框选择单个或多个文件，因此提供了 event.target.files 来获取所选的文件列表。