前言

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

拖拽上传

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

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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  async mounted() {
    // 给容器绑定相关的拖拽事件
    this.bindEvents()
  },
  methods: {
    bindEvents() {
      const drag = this.$refs.drag
      // 被拖动的对象进入目标容器
      drag.addEventListener('dragover', e => {
        e.preventDefault()
        drag.style.borderColor = 'red'
      })
      // 被拖动的对象离开目标容器
      drag.addEventListener('dragleave', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
      })
      // 被拖动的对象进入目标容器，释放鼠标键
      drag.addEventListener('drop', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
        const fileList = e.dataTransfer.files
        this.file = fileList[0]
        this.uploadFile()
      })
    },
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/upload', form)
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

<style lang="scss" scoped>
.drag {
  width: 660px;
  height: 300px;
  border: 2px dashed;
  border-color: #a3a3a3;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .drag-icon-box {
    width: 100%;
    height: 60px;
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    color: #606266;
  }
  .drag-message {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    .drag-message-title {
      font-size: 14px;
      color: #606266;
    }
    .drag-message-label {
      width: 120px;
      height: 50px;
      height: auto;
      position: relative;
      overflow: hidden;
      .drag-message-input {
        position: absolute;
        left: -100px;
        top: -100px;
        z-index: -1;
        display: none;
      }
      .drag-message-manual {
        font-size: 14px;
        color: #4b87ff;
        cursor: pointer;
      }
    }
  }
}
</style>

上传进度条

进度条可以说是最普遍的一种需求，特别是大文件上传的时候。实现方法也比较简单，利用 axios 的 onUploadProgress 方法就可以了。

效果展示

代码实现

<div>
  <!-- 采用的是 element-ui 的进度条组件 -->
  <el-progress
    :stroke-width="20"
    :text-inside="true"
    :percentage="uploadProgress"
  ></el-progress>
</div>

<script>
export default {
  data() {
    return {
      file: null,
      uploadProgress: 0
    }
  },
  methods: {
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/uploadfile', form, {
        onUploadProgress: progress => {
          this.uploadProgress = Number(
            ((progress.loaded / progress.total) * 100).toFixed(2)
          )
        }
      })
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

取消上传

当上传很慢等的捉急时，或者手一抖，上传了一个不该上传的视频（你懂的），在上传未完成的情况下，能否进行取消呢？答案当然是可以的。

效果展示

其实取消上传就是取消 ajax 请求，可以利用 axios 的 cancel token 进行取消。

方法一：使用 CancelToken.source 工厂方法创建 cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/upload', form, {
  cancelToken: source.token
})

source.cancel();

方法二：通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.post('/upload', form, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

cancel();

有兴趣的同学可以试一试，将以上方法融入到自己的项目中。

总结

ok，以上就是上传需求中最常见的一些场景，无论是拖拽上传还是粘贴上传，最主要的是通过相应的事件拿到文件信息。而进度条和取消上传则是利用 axios 的 api 进行实现，axios 还有众多实用的配置选项，大家可以自己研究一哈。

听说喜欢点赞的人运气都不差，相信今年的你一定逢考必过，逢奖必中😘