直接先上效果图：



如果需求是和我一样的就可以接着看下面的代码啦
注：1. 我区分了音频 视频和图片传输，其实传的是一样的 只是最后显示不一样的所以做了区分，不需要的可以不要。 2.我用的是组件，也可在页面直接写。

<template>
  <div>
    <!-- 上传组件 -->
    <div class="upload_com" :style="videoUrlShow == 2 ? 'border: 1px dashed #d9d9d9;border-radius: 6px;': ''">
      <el-upload  v-if="videoUrlShow == 1" action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
        </div>
      </el-upload>
      <!--进度条-->
      <el-progress v-if="videoUrlShow == 2" type="circle" :percentage="percent.toFixed()*1"></el-progress>
      <!-- 展示上传成功的视频 -->
      <div v-if="videoUrlShow == 3 && isType !== 'other'" class="videoShow">
        <video v-if="isType == 'video'" :src="videoUrl" controls />
        <img v-if="isType == 'image'" :src="videoUrl">
        <audio v-if="isType == 'audio'" :src="videoUrl" controls/>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
  import SparkMD5 from "spark-md5"
  import axios from "axios"
  import { getUploadId, doVideoImport } from '@/api/upImport'
  export default {
    name: 'UploadFile',
    props: {
        isType: String, // video-视频, audio-音频， image-图片, other-其他
        isName: String, // video路径
    },
    data() {
      return {
        percent: 0,
        videoUrl: '',
        videoUrlShow: 1,
        percentCount: 0,
        params: {
            id: '', // 标识
            chunks: '', // 总切片数量
            chunk: '', // 当前为第几块切片
            name: '', // 当前文件名
            file: '', // 当前文件
        }
      }
    },
    watch: {
      isName(val, oldval) {
        this.videoUrl = val
        if (!val) {
         this.videoUrlShow = 1; 
        }
      }
    },
    mounted() {
      if (this.isName) {
        this.videoUrlShow = 3;
        this.videoUrl = this.isName;
      } else {
         this.videoUrlShow = 1; 
         this.videoUrl = ''
      }
    },
    methods: {
      async handleChange(file) {
        if (!file) return
        if (file.raw.type.indexOf(this.isType) == -1) {
            return this.$dialog.quicktips('请上传正确类型的文件')
        }
        this.percent = 0
        this.videoUrl = ''
        // 获取文件并转成 ArrayBuffer 对象
        const fileObj = file.raw
        let buffer
        try {
          buffer = await this.fileToBuffer(fileObj)
        } catch (e) {
          console.log(e)
        }
        
        // 将文件按固定大小（2M）进行切片，注意此处同时声明了多个常量
        const chunkSize = 2097152,
          chunkList = [], // 保存所有切片的数组
          chunkListLength = Math.ceil(fileObj.size / chunkSize) // 计算总共多个切片
          this.params.chunks = chunkListLength
          var suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名
          
        // 根据文件内容生成 hash 值
        const spark = new SparkMD5.ArrayBuffer()
        spark.append(buffer)
        const hash = spark.end()

        // 生成切片，这里后端要求传递的参数为字节数据块（chunk）和每个数据块的文件名（fileName）
        let curChunk = 0 // 切片时的初始位置
        for (let i = 0; i < chunkListLength; i++) {
          const item = {
            chunk: fileObj.slice(curChunk, curChunk + chunkSize),
            // fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg 命名
            fileName: `${hash}.${suffix}`, // 文件名规则按照 hash_1.jpg 命名
            dqchunk: i
          }
          this.params.name = `${hash}.${suffix}`
          this.params.chunk = item.i
          curChunk += chunkSize
          chunkList.push(item)
        }
        this.chunkList = chunkList // sendRequest 要用到
        this.hash = hash // sendRequest 要用到
        // 获取id
        getUploadId().then(res => {
           if (res.code === 200) { // 请求发送成功
                this.params.id = res.data
                this.sendRequest()
            }
        })
      },
      // 发送请求
      sendRequest() {
        const requestList = [] // 请求集合
        this.chunkList.forEach((item, index) => {
          const fn = () => {
            const formData = new FormData()
            formData.append('chunk', item.dqchunk)
            formData.append('name', item.fileName)
            formData.append('file', item.chunk)
            formData.append('id', this.params.id)
            formData.append('chunks', this.params.chunks)
            return doVideoImport(formData).then(res => {
               if (res.code === 200) {
                  // 成功
                  this.videoUrlShow = 2
                  this.percent += 1 / this.params.chunks * 100 // 改变进度
                  this.chunkList.splice(index, 1) // 一旦上传成功就删除这一个 chunk，方便断点续传
                  if (res.data) {
                    this.videoUrlShow = 3
                    this.videoUrl = res.data.url
                    this.$dialog.quicktips('上传完成')
                    this.$emit('fileurl', res.data.url)
                  }
                }
            })
          }
          requestList.push(fn)
        })
        
        let i = 0 // 记录发送的请求个数
        const send = async () => {
          if (i >= requestList.length) {
            // 发送完毕
            return
          } 
          await requestList[i]()
          i++
          send()
        }
        send() // 发送请求
      },
      
      
      // 将 File 对象转为 ArrayBuffer 
      fileToBuffer(file) {
        return new Promise((resolve, reject) => {
          const fr = new FileReader()
          fr.onload = e => {
            resolve(e.target.result)
          }
          fr.readAsArrayBuffer(file)
          fr.onerror = () => {
            reject(new Error('转换文件格式发生错误'))
          }
        })
      }
    }
  }
</script>

<style scoped>
  .progress-box {
    box-sizing: border-box;
    width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #ecf5ff;
    font-size: 14px;
    border-radius: 4px;
  }
  .videoShow video, .videoShow img{
     width: 360px;
     height: 180px;
  }
  .upload_com{
    margin-top: 20px;
    position: relative;
    width: 360px;
    height: 180px;
    text-align: center;
  }
  .el-upload{
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .el-progress--circle{
    margin-top: 26px;
  }
  .videoShow{
      text-align: left;
  }
</style>