Vue上傳視頻

一、Vue上傳視頻文件

Vue上傳視頻文件是前端開發中非常重要的一環，該環節主要負責將視頻文件上傳至服務器。前端上傳一般分為兩步：1）獲取視頻文件2）上傳文件。Vue框架最常見的形式是使用第三方插件vue-upload-component。

1.獲取視頻文件

獲取視頻文件可以使用input[type=”file”]標籤，但是該標籤每次傳輸的文件大小有限制，還需要在每個上傳按鈕上重新設置。可以選擇使用封裝好的Vue組件，例如vue-upload-component，使用該組件可以讓文件上傳變得更容易。

<template>
   <VueUploadComponent 
      class="video-upload"
      extensions="mp4,mov" 
      :chunk-size="1024*1024+100"
      :multiple="true" 
      @input-file="onInputFile" 
      @on-start="onStart"
   >
     <div class="dropzone">拖放視頻文件或者點擊這裡</div>
   </VueUploadComponent>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {VueUploadComponent},
  methods: {
    onStart () {
      console.log('Started...');
    },
    onInputFile (event) {
      console.log(event);
    }
  }
};
</script>

2.上傳視頻文件

上傳文件一般使用FormData來封裝表單數據以及文件。Vue中可以使用axios或者Vue-resource等http庫來發送請求，並且封裝好了上傳文件所需的FormData。我們只需在Vue組件中綁定事件監聽器並使用http庫上傳文件即可。

<template>
  <div>
    <input type="file" @change="uploadVideo" accept="video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    uploadVideo (event) {
      const formData = new FormData();
      formData.append('video', event.target.files[0]);
      axios.post('/api/video', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Video uploaded!');
      });
    }
  }
};
</script>

二、Vue上傳圖片和視頻

在Vue中同時上傳圖片和視頻有兩種方法：1）使用Vue-upload-component；2）使用HTML5多文件上傳功能。

1.使用Vue-upload-component上傳圖片和視頻

使用Vue-upload-component可以同時上傳圖片和視頻，只需指定允許上傳的文件類型，即可完成上傳操作。

<template>
  <div>
    <VueUploadComponent :accept="'image/*, video/*'" id="file" :max-size="10 * 1024 * 1024" @input-file="onInputFile" />
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {VueUploadComponent},
  methods: {
    onInputFile () {
      console.log('File input!');
    }
  }
};
</script>

2.使用HTML5多文件上傳功能

HTML5多文件上傳功能可以將多個文件傳輸至服務器，但需要手動建立文件輸入框並監聽文件選擇事件。

<template>
  <div>
    <input type="file" multiple="multiple" @change="uploadFiles" accept="image/*, video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    uploadFiles (event) {
      const formData = new FormData();
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        formData.append(`file${i}`, files[i]);
      }
      axios.post('/api/upload', formData, {
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Files uploaded!');
      });
    }
  }
};
</script>

三、Vue上傳視頻回顯

Vue上傳視頻回顯主要是將已上傳的視頻顯示在頁面上。視頻回顯有兩種形式：1）預覽圖+鏈接下載；2）直接播放視頻。

1.預覽圖+鏈接下載

預覽圖+鏈接下載是將上傳的視頻轉換為預覽圖和下載鏈接的形式，直接點擊預覽圖即可下載視頻。預覽圖一般是視頻的第一幀截圖。

<template>
  <div v-for="video in videos">
    <img :src="video.cover" alt="video cover" />
    <a :href="downloadVideo(video.url)" download>Download</a>
  </div>
</template>

<script>
export default {
  methods: {
    downloadVideo (url) {
      return url.replace('videos/', 'download/');
    }
  }
};
</script>

2.直接播放視頻

直接播放視頻是在頁面上直接顯示上傳的視頻，使用HTML5 video標籤即可實現。該方式比預覽圖+鏈接下載行為直觀。

<template>
  <div v-for="video in videos">
    <video :src="video.url" controls></video>
  </div>
</template>

四、Vue上傳視頻和後台交互

上傳視頻到服務器時，需要和後台進行交互，將數據和文件傳輸給服務器。常用的方式有兩種：1）前後端分離；2）後端封裝。

1.前後端分離

前後端分離是將前端和後台分別進行開發，兩者使用API進行交互。前端主要負責文件上傳和接收與後台的交互數據來更新UI頁面。後台負責接收文件和數據，進行文件存儲和其他邏輯處理。

前端代碼

<template>
  <div>
    <input type="file" @change="uploadVideo" accept="video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    uploadVideo (event) {
      const formData = new FormData();
      formData.append('video', event.target.files[0]);
      axios.post('/api/video', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Video uploaded!');
      });
    }
  }
};
</script>

後端代碼

const express = require('express');
const multer  = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/videos');
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage });

app.post('/api/video', upload.single('video'), (req, res) => {
  console.log('Video uploaded!');
  res.send();
});

app.listen(3000, () => {
  console.log('Server started!');
});

2.後端封裝

後端封裝是後台對上傳文件進行封裝，前端只需要調用對應的API即可完成文件上傳和交互互動。該方式開發難度小，適用於小型應用。

<template>
  <div>
    <input type="file" @change="uploadVideo" accept="video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    uploadVideo (event) {
      const formData = new FormData();
      formData.append('video', event.target.files[0]);
      axios.post('/api/video', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Video uploaded!');
      });
    }
  }
};
</script>

五、Vue上傳視頻獲取視頻信息

上傳視頻後，我們需要獲取視頻信息來進行後續操作。獲取視頻信息有兩種方法：1）使用FFmpeg；2）使用瀏覽器原生API。

1.使用FFmpeg獲取視頻信息

FFmpeg是一個開源的視頻處理工具，可以運行在各種操作系統上。使用Vue結合FFmpeg，可以直接在前端實現對上傳視頻的格式轉換、視頻截圖等操作，但需要用戶的瀏覽器支持WebAssembly。

<template>
  <div>
    <input type="file" ref="fileInput" @change="getVideoInfo" accept="video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    getVideoInfo () {
      if (!this.$refs.fileInput.files.length) return;
      const file = this.$refs.fileInput.files[0];
      const ffm = createFFmpeg({
        log: true,
        progress: p => console.log(p)
      });

      ffm.load().then(() => {
        ffm.FS('writeFile', 'video.mp4', new Uint8Array(await response.arrayBuffer()));
        ffm.run('-i', 'video.mp4');
        const stdout = ffm.FS('readFile', 'stdout').toString();
        console.log(stdout);
      });
    }
  }
};
</script>

2.使用瀏覽器原生API獲取視頻信息

使用瀏覽器原生API可以獲取視頻的一些基本信息，例如視頻截圖、時長、大小等。

<template>
  <div>
    <input type="file" ref="fileInput" @change="getVideoInfo" accept="video/*" />
  </div>
</template>

<script>
export default {
  methods: {
    getVideoInfo () {
      if (!this.$refs.fileInput.files.length) return;
      const file = this.$refs.fileInput.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        const video = document.createElement('video');
        video.setAttribute('src', reader.result);
        video.load();
        video.onloadedmetadata = () => {
          console.log('Video duration:', video.duration);
          console.log('Video width:', video.videoWidth);
          console.log('Video height:', video.videoHeight);
        };
      };
    }
  }
};
</script>

六、Vue上傳視頻文件組件

為了方便重用，可以將Vue上傳視頻的相關代碼封裝為一個組件。組件的作用是將上傳文件的過程封裝起來，避免重複代碼和頁面實現的重複。

<template>
  <div>
    <input type="file" ref="fileInput" @input="onInputFile" accept="video/*" />
    <button @click="uploadVideo">Upload</button>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      file: null
    };
  },
  methods: {
    onInputFile (event) {
      this.file = event.target.files[0];
    },
    uploadVideo () {
      if (!this.file) return;
      const formData = new FormData();
      formData.append('video', this.file);
      axios.post(this.url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('Video uploaded!');
      });
    }
  }
};
</script>

七、Vue上傳視頻，獲取時長

獲取視頻時長可以使用ffmpeg或者HTML5提供的duration屬性。

1.使用FFmpeg獲取時長

<script>

export default {

methods: {

async getVideoDuration () {

const fileInput = this.$refs
原創文章，作者：XZSU，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/147513.html