vue與axios上傳視頻并顯示上傳進(jìn)度情況

更新時(shí)間：2026年02月24日 09:04:52 作者：little_shallot

本文講述了項(xiàng)目中實(shí)現(xiàn)上傳視頻并顯示上傳進(jìn)度的功能,首先使用axios庫(kù)進(jìn)行單文件引入,未進(jìn)行封裝,通過element組件庫(kù)實(shí)現(xiàn)選擇文件上傳,并打印選擇文件的信息,上傳完成后,可以在展示區(qū)域顯示上傳的視頻,鼠標(biāo)移入播放區(qū)域時(shí)會(huì)有相應(yīng)的效果

首先引入axios

我這里是單文件引入,沒有使用封裝

import axios from 'axios'

主要用到的參數(shù)有

      exception: '-', //進(jìn)度條當(dāng)前狀態(tài)
      videolist: [], // 視頻合集
      progress: 0, // 進(jìn)度條
      video: '',  //保存預(yù)留地址

需要個(gè)觸發(fā)選擇文件上傳的按鈕

這里用的element做為布局

   <el-form-item label="視頻">
        <div>
        	//限制上傳完成才能上傳下一個(gè)
          <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: '請(qǐng)等待上傳完成',
        type: 'error'
      })
    },

accept(選擇的文件格式),點(diǎn)擊上傳之后選擇文件會(huì)觸發(fā)事件回調(diào)，打印如下：

拿到之后就可以上傳到服務(wù)器了

 // 上傳視頻
    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('請(qǐng)上傳正確的視頻格式')
        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
        // 獲取轉(zhuǎn)換后的地址地址
      }
      // 轉(zhuǎn)化為base64
      reader.readAsDataURL(file)
      const formData = new FormData() // 創(chuàng)建form對(duì)象
      formData.append('file', file) // 通過append向form對(duì)象添加數(shù)據(jù)const res = await upLoadImage(formData);
      axios({
        url: this.apiUrl + '/file',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data', Authorization: `${this.uploadHeaders.Authorization}` },
        // 原生獲取上傳進(jìn)度的事件
        onUploadProgress: progressEvent => {
          const process = ((progressEvent.loaded / progressEvent.total) * 100) | 0
          this.progress = process
        }
      }).then(res => {
        this.$message({ message: `上傳${res.data.msg}`, type: 'success' })
        // 進(jìn)度條變成成功狀態(tài)
        this.exception = 'success'
        // 延時(shí)初始化進(jìn)度條
        setTimeout(() => {
          this.progress = 0
          // 數(shù)據(jù)填充 獲取本地轉(zhuǎn)化為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' })
        // 進(jìn)度條變成失敗狀態(tài)
        this.exception = 'exception'
        // 延時(shí)初始化進(jìn)度條
        setTimeout(() => { this.progress = 0 }, 2000)
      })
      //   防止第二次同一個(gè)文件不能選中
      e.target.value = ''
    },

然后上傳完成之后就是展示區(qū)域

 <el-form-item>
        <div class="list-image">
          <div v-for="(item,index) in videolist" :key="index">
            <video class="video" :src="item.data" alt="" />
            <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>

中間好像不顯示，可以自行修改

遮罩樣式

.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);
  }
}

鼠標(biāo)移上去的事件

    // 刪除
    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 = ''
    }

播放區(qū)域

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

效果：