如何实现拖拽上传、上传进度条，以及取消上传？

文件上传是最常见的一种业务需求，上传功能可简单，可复杂，简单就是把文件传上去就行，复杂就是涉及大文件断点续传、控制并发等，不知道大家对上传都了解多少。今天要给大家分享的是上传需求中最为常见的一些场景，话不多说，开干：

拖拽上传

拖拽上传涉及到样式交互、文件信息获取，那么，我们首先了解一下拖拽相关的几个事件：

1. dragover - 被拖动的对象进入目标容器时触发
2. dragleave - 被拖动的对象离开目标容器时触发
3. drop - 被拖动的对象进入目标容器，释放鼠标键时触发

了解了这几个事件，再实现拖拽上传就相当容易了。先上效果图：

效果展示

当被拖动的对象进入目标容器时，容器边框变红。当拖出目标容器，或者释放鼠标键时，容器边框置灰。当释放鼠标键时，获取拖动对象的文件信息。

代码实现

<template>
  <div ref="drag" class="drag">
    <div class="drag-icon-box">
      <!-- 采用的是 element-ui 的图标 -->
      <i class="el-icon-upload"></i> 
    </div>
    <div class="drag-message">
      <span class="drag-message-title">将文件拖动到此处，或</span>
      <label for="file" class="drag-message-label">
        <input
          class="drag-message-input"
          type="file"
          id="file"
          name="file"
          @change="handleFileChange"
        />
        <span class="drag-message-manual">点击上传</span>
      </label>
    </div