The project requirements

After selecting a video, the user goes to the BGM selection page. After selecting a BGM, the user uploads the video along with other parameters, such as BGM information and video description, to the server.

Demand analysis

Video selection and BGM selection take place between two different pages and jump to the BGM selection page after video selection.

  • Therefore, before jumping tobgmWhen selecting a page, you should carry parameters about the video.
  • In selectedbgmAfter the video message andbgmAnd other informationpostTo the server.

Problems encountered

  • In the jump tobgmHow should the video information be passed to the page?
  • Video message is a relatively large file, you can directly put video parameters intoqueryParameters?

Thinking a

I have two ideas for solving this problem:

  • After selecting the video, we can retrieve the contents of the file and then useURL.createObejctUrl(new Blob([file.content])), generate ablob-url. And then take thisblob-urlPassed to thebgmSelect the page. And then,bgmSelect page redirectionblob-urlInitiate a request to obtain the file contents. It was avoided in this wayqueryParameter volume is too large.

The specific process is shown below

Page A page B[BGM selection] Select files submit videos/BGM information to the server. Obtain file objects. After obtaining file objects, put them in formData together with other parameters Send a request to the 'blob-URL' : I've been passing a series of comments about this eventCopy the code

The specific implementation code is as follows:

.<uploader :after-read="afterSelected" :max-size="524288000">
    <button class="upload_video_btn">Upload video</button>
</uploader>.Copy the code

// Select the callback function after the video
afterSelected(file) {
    // Generate blob objects and generate blob-urls from blob objects
      const url = URL.createObjectUrl(new Blob([file.content]))
      this.$router.push({
        path:'/chooseBgm'.query: {name:file.file.name,
          url
        }
      })
    }
// Jump to the logic after the BGM selection page
//1. Get video content
upload(){
    let data = await axios.get(this.$route.query.url)
    data = data.data
    let formdata = new FormData() // Uploading a video involves uploading a file, so formData is required
    formdata.append(data,data)
    formdata.append(name,this.$route.query.name)
    ...// Add additional information such as the BGM implementation description, which is omitted here
   uploadVideo(formdata,{
    headers: {// Because it involves uploading files, this header should not be small
       "Content-Type": "multipart/form-data"
    }
   }).then((val) = >{
    console.log(val.data.message); })}Copy the code

Idea 2

Putting the contents of the file directly into the Query or params parameters is a bit rough and bulky, but it is still effective.

 afterSelected(file) {
      this.$router.push({
        path:'/chooseBgm'.query: {name:file.file.name,
          content:file.content
        }
      })
    }
Copy the code

The logic of selecting pages in BGM is the same as above…

As you can see from the description above, neither approach is elegant enough. Either the parameters are too large, or there are too many network requests… Hope that god can have other methods, but also hope to give advice!

Through this need, I learned

  • How to useBlobObject to upload large file fragments
  • aboutblobThe use of
  • aboutformdataSome knowledge points of