vue實現視頻上傳[項目筆記]

時間 2019-11-09

標籤 vue 實現視頻上傳項目筆記简体版

原文原文鏈接

項目需求

用戶在選擇視頻後，跳轉到bgm選擇頁面，選擇bgm後，再將視頻連同其餘參數bgm信息/視頻描述等同一上傳到服務器。javascript

需求分析

視頻選擇和bgm選擇在兩個不一樣頁面之間進行，而且是在選擇視頻以後跳轉到bgm選擇頁面。html

所以，在跳轉到bgm選擇頁面時，應該攜帶關於視頻的參數。
在選定bgm後，將視頻信息和bgm等其餘信息統一post到服務器。

碰見的問題

在跳轉到bgm頁面時，應該怎麼將視頻信息傳遞過去？
視頻信息是一個相對比較大的文件，能夠直接將視頻參數放到query參數嗎？

思路一

在解決這個問題時，我有兩個思路：java

在選擇視頻後，咱們能夠獲取到文件的內容，而後利用URL.createObejctUrl(new Blob([file.content])),生成一個blob-url。而後將這個blob-url傳遞給bgm選擇頁面。而後,bgm選擇頁面再向blob-url發起請求，得到文件內容。用這種方式避免了query參數體積過大的問題。

具體流程以下圖ios

頁面A[視頻選擇]                           頁面B[bgm選擇]
        選擇文件                                提交視頻/bgm等信息到服務器
            ⬇                                       ⬆
            ⬇                                       ⬆
        獲取file對象                             獲取文件對象後,同其餘參數一塊兒放到formdata中
            ⬇                                       ⬆
            ⬇                                       ⬆
        根據file.content生成Blob對象            向這個`blob-url`發起請求
            ⬇                                       ⬆
            ⬇                                       ⬆
        根據Blob對象生成`blob-url`➡➡➡➡➡➡➡獲得blob-url
複製代碼

具體實現代碼以下：axios

...
<uploader :after-read="afterSelected" :max-size="524288000">
    <button class="upload_video_btn">上傳視頻</button>
</uploader>
...
複製代碼

// 選擇視頻後的回調函數
afterSelected(file) {
    // 生成blob對象,並根據blob對象生成blob-url
      const url = URL.createObjectUrl(new Blob([file.content]))
      this.$router.push({
        path:'/chooseBgm',
        query:{
          name:file.file.name,
          url
        }
      })
    }
//跳轉到bgm選擇頁面後的邏輯
//1.獲取視頻內容
upload(){
    let data = await axios.get(this.$route.query.url)
    data = data.data
    let formdata = new FormData() // 上傳視頻涉及到文件上傳,因此須要使用formdata
    formdata.append(data,data)
    formdata.append(name,this.$route.query.name)
    ...//加入其餘信息 好比 bgm 實現描述等，在這裏省略
   uploadVideo(formdata,{
    headers:{ // 由於涉及到文件上傳，這個頭部內容不能少
       "Content-Type": "multipart/form-data"
    }
   }).then((val)=>{
    console.log(val.data.message);
   })
}
複製代碼

思路二

直接將文件內容放到query參數或者params參數中，雖然簡單粗暴了點，致使參數體積龐大，但仍是頗有效的。bash

afterSelected(file) {
      this.$router.push({
        path:'/chooseBgm',
        query:{
          name:file.file.name,
          content:file.content
        }
      })
    }
複製代碼

在bgm選擇頁面的邏輯跟上面一毛同樣...服務器