javascript - Chunk file upload with axios - Stack Overflow

admin管理员组

文章数量:1430849

I encountered a problem and was hopeing someone could help me. I need to realize file chunk upload with axios, and I need to send the chunks to my server one after the other. So new axios request should happen after the previous one is pleted. Now, requests are not sent in order. my code is below:

  addChunk(file) { // I receive file from my file uploader 
  this.getBase64(file[0].file).then((base64) => {
    this.convertChunks = base64.replace(base64.substring(0, base64.search(',') + 1), '')
    this.convertedArr = this.convertChunks .match(/.{1,500000}/g) //here I convert it into base64 with helper function
  })
  for (let i in this.convertedArr) {
    if (this.uploadSuccess === false) return null
      axios({
        url: `${domain}`,
        method: 'POST',
        data: [this.convertedArr[i]]
      })
        .then(() => {
          if (parseInt(i) === this.convertedArr.length - 1) {
            this.nextFunction()  //after the last chunk is sent successfully, i need to call another function
          }
        })
        .catch((error) => {
          console.log(error)
        })
  }
},

I encountered a problem and was hopeing someone could help me. I need to realize file chunk upload with axios, and I need to send the chunks to my server one after the other. So new axios request should happen after the previous one is pleted. Now, requests are not sent in order. my code is below:

  addChunk(file) { // I receive file from my file uploader 
  this.getBase64(file[0].file).then((base64) => {
    this.convertChunks = base64.replace(base64.substring(0, base64.search(',') + 1), '')
    this.convertedArr = this.convertChunks .match(/.{1,500000}/g) //here I convert it into base64 with helper function
  })
  for (let i in this.convertedArr) {
    if (this.uploadSuccess === false) return null
      axios({
        url: `${domain}`,
        method: 'POST',
        data: [this.convertedArr[i]]
      })
        .then(() => {
          if (parseInt(i) === this.convertedArr.length - 1) {
            this.nextFunction()  //after the last chunk is sent successfully, i need to call another function
          }
        })
        .catch((error) => {
          console.log(error)
        })
  }
},

• javascript
• vue.js
• vuejs2
• axios

Share Improve this question Follow asked Nov 24, 2020 at 16:32 kuroi.kasakuroi.kasa 6522 silver badges66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Use the async / await syntax to make it possible for your method to wait for the axios request to finish.

Also switch to for...of instead of for...in. The latter is used loop over enumerable properties of an object, and although it an be used on an array, it should be avoided when order is important.

Expand the for...of by looping over the this.convertedArr.entries(). This will create an array with [ index, value ] for each item in the array, so this enables you to use the index.

With try...catch...finally you can catch any errors an awaited function call might produce. The finally part is there to make sure that that part is called if either the request has been successful or failed.

async addChunk(file) { // I receive file from my file uploader 
  this.getBase64(file[0].file).then((base64) => {
      this.convertChunks = base64.replace(base64.substring(0, base64.search(',') + 1), '')
      this.convertedArr = this.convertChunks.match(/.{1,500000}/g) //here I convert it into base64 with helper function
  })

  for (const [ i, item ] of this.convertedArr.entries()) {
    if (this.uploadSuccess === false) return null

    try {
      await axios({
        url: `${domain}`,
        method: 'POST',
        data: [item]
      });
    } catch(error) {
      console.log(error)
    } finally {
      if (parseInt(i) === this.convertedArr.length - 1) {
        this.nextFunction();
      }
    }
  }
}

本文标签： javascriptChunk file upload with axiosStack Overflow