There are all kinds of requirements when you’re working on a project, so this time it’s uploading a video and showing the upload progress, so let’s start by introducing Axios, I’m introducing a single file instead of using encapsulation

import axios from 'axios'
Copy the code

The main parameters used are

      exception: The '-'.// Current status of the progress bar
      videolist: [], // Video collection
      progress: 0./ / the progress bar
      video: // Save the preview addressCopy the code

Need a button to trigger select file uploadElement is used here for layout

   <el-form-item label="Video">
        <div>
        	// Limit the upload to the next one
          <label v-if="progress === 0" class="btn" for="uploadvideo"> < span style = "max-width: 100%label>
          <label v-else class="btn"@click="uploading"> < span style = "max-width: 100%label>
          <input
            id="uploadvideo"
            style="display:none;"
            type="file"
            accept="video/ * "@change="selectvideo($event) "> < /div>
      </el-form-item>

Copy the code
  // The upload is not completed
    uploading() {
      this.$message({message: 'please wait for upload to complete ', type: 'error'})},Copy the code

Accept (select file format), click upload and select file will trigger event callback, print belowOnce you get it, you can upload it to the server

 // Upload the video
    selectvideo(e) {
      this.exception = The '-'
      const file = e.target.files[0] // Get the selected file
      if ([
        'video/mp4'.'video/ogg'.'video/flv'.'video/avi'.'video/wmv'.'video/rmvb'.'video/mov'
      ].indexOf(file.type) === -1
      ) {
        // layer. MSG (' Please upload the correct video format ')
        return false
      }
      if(! file.size) {// layer. MSG (' Video size can't exceed 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
        // Get the translated address address
      }
      // Convert to base64
      reader.readAsDataURL(file)
      const formData = new FormData() // Create a form object
      formData.append('file', file) Const res = await upLoadImage(formData);
      axios({
        url: this.apiUrl + '/file',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data', Authorization: `${this.uploadHeaders.Authorization}` },
        // Get the upload progress event natively
        onUploadProgress: progressEvent => {
          const process = ((progressEvent.loaded / progressEvent.total) * 100) | 0
          this.progress = process
        }
      }).then(res => {
        this.$message({message: 'upload ${res.data.msg}', type:'success' })
        // The progress bar becomes successful
        this.exception = 'success'
        // Delay the initialization progress bar
        setTimeout(() => {
          this.progress = 0
          // Data fill to get the address locally converted to Base64 and the successful upload address
          this.videolist.push({ data: this.videosrc, src: this.apiUrl + '/file/getImgStream? idFile=' + res.data.data.realFileName })
        }, 500)}).catch(_error => {
        this.$message({message: 'upload failed', type:'error' })
        // The progress bar becomes failed
        this.exception = 'exception'
        // Delay the initialization progress bar
        setTimeout(() => { this.progress = 0 }, 2000)})// Prevent the same file from being unselected a second time
      e.target.value = ' '
    },
Copy the code

And then after the upload is complete, it’s the display area

 <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-size23:px;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>
Copy the code

The middle does not seem to show, you can modify

Mask style

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

Mouse up events

    / / delete
    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 = ''}Copy the code

Play area

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

The effectI beg your pardon