vue与axios上传视频并显示上传进度

做项目难免会有各种各样的需求,这次是上传视频并显示上传进度,好的我们开始吧首先先引入axios,我这里是单文件引入,没有使用封装

import axios from 'axios'

主要用到的参数有

      exception: '-', //进度条当前状态
      videolist: [], // 视频合集
      progress: 0, // 进度条
      video: '',  // 保存预览地址

需要个触发选择文件上传的按钮 vue与axios上传视频并显示上传进度这里用的element做为布局

   <el-form-item label="视频">
        <div>
        	//限制上传完成才能上传下一个
          <label v-if="progress === 0" class="btn" for="uploadvideo">上传视频</label>
          <label v-else class="btn" @click="uploading">上传视频</label>
          <input
            id="uploadvideo"
            style="display:none;"
            type="file"
            accept="video/*"
            @change="selectvideo($event)"
          >
        </div>
      </el-form-item>

  // 未上传完成阻止
    uploading() {
      this.$message({
        message: '请等待上传完成',
        type: 'error'
      })
    },

accept(选择的文件格式),点击上传之后选择文件会触发事件回调,打印如下 vue与axios上传视频并显示上传进度拿到之后就可以上传到服务器了

 // 上传视频
    selectvideo(e) {
      this.exception = '-'
      const file = e.target.files[0] // 获取选中的文件
      if ([
        'video/mp4',
        'video/ogg',
        'video/flv',
        'video/avi',
        'video/wmv',
        'video/rmvb',
        'video/mov'
      ].indexOf(file.type) === -1
      ) {
        // layer.msg('请上传正确的视频格式')
        return false
      }
      if (!file.size) {
        // layer.msg('视频大小不能超过50MB')
        return false
      }
      const reader = new FileReader()
      reader.onload = e => {
        let data
        if (typeof e.target.result === 'object') {
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.videosrc = data
        // 获取转换后的地址地址
      }
      // 转化为base64
      reader.readAsDataURL(file)
      const formData = new FormData() // 创建form对象
      formData.append('file', file) // 通过append向form对象添加数据const res = await upLoadImage(formData);
      axios({
        url: this.apiUrl + '/file',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data', Authorization: `${this.uploadHeaders.Authorization}` },
        // 原生获取上传进度的事件
        onUploadProgress: progressEvent => {
          const process = ((progressEvent.loaded / progressEvent.total) * 100) | 0
          this.progress = process
        }
      }).then(res => {
        this.$message({ message: `上传${res.data.msg}`, type: 'success' })
        // 进度条变成成功状态
        this.exception = 'success'
        // 延时初始化进度条
        setTimeout(() => {
          this.progress = 0
          // 数据填充 获取本地转化为base64的地址和上传成功地址
          this.videolist.push({ data: this.videosrc, src: this.apiUrl + '/file/getImgStream?idFile=' + res.data.data.realFileName })
        }, 500)
      }).catch(_error => {
        this.$message({ message: `上传失败`, type: 'error' })
        // 进度条变成失败状态
        this.exception = 'exception'
        // 延时初始化进度条
        setTimeout(() => { this.progress = 0 }, 2000)
      })
      //   防止第二次同一个文件不能选中
      e.target.value = ''
    },

然后上传完成之后就是展示区域

 <el-form-item>
        <div class="list-image">
          <div v-for="(item,index) in videolist" :key="index">
            <video class="video" :src="item.data"  />
            <span><i class="el-icon-delete" @click="deletevideo(index)" /><i
              class="el-icon-caret-right"
              style="font-size: 23px;margin-left: 5px;"
              @click="pay(index)"
            /></span>
          </div>
          <el-progress
            v-if="progress"
            type="circle"
            :percentage="progress"
            style="height: 126px; width: 126px;"
            :status="exception"
          />
        </div>
      </el-form-item>

vue与axios上传视频并显示上传进度中间好像不显示，可以自行修改

vue与axios上传视频并显示上传进度遮罩样式

.list-image {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  div,
  .videolist {
    width: 150px;
    height: 150px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
    border-radius: 6px;
    overflow: hidden;
    transition: opacity 0.3s;
    img,
    video {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      i:hover {
        cursor: pointer;
      }
    }
  }
  div:hover span {
    opacity: 1;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  }
}

鼠标移上去的事件

    // 删除
    deletevideo(e) {
      this.videolist.splice(e, 1)
      this.video = ''
    },
    // 播放
    pay(index) {
      this.video = this.videolist[index].data
      this.dialogTableVisible = true
    },
    // 弹窗消失清空地址
    close() {
      this.dialogTableVisible = false
      this.video = ''
    }

播放区域

   <el-dialog :visible.sync="dialogTableVisible" style="text-align: center" :before-close="close">
        <video :src="video" controls="controls" autoplay width="500px" />
      </el-dialog>

效果 vue与axios上传视频并显示上传进度小白一个，请多多包涵