Cant send image upload and use token bearer authentication with axios

Question

let url = this.globalAPIBaseUrl + 'program/' + this.tmsID + '/updateposters/?posterType=' + imageType;
let j = [{
  posterType: imageType,
  url: imageUrl
}];
axios.patch(url, {
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('accessToken')
  }
}, j, {
  onUploadProgress: progressEvent => {
    this.basic.status = 'Uploaded: ' + progressEvent.loaded + 'b of ' + progressEvent.total + 'b'
  }
}).then(response => (this.handleUploadComplete(response)));

before i put in the "headers" is worked fine, and when i use the same auth headers, but no "j" data variable elsewhere it also works fine.

Any advice, i'm kinda new here with axios. (this is in vue2.js btw)

Answer 1

data should be the second parameter, and the third parameter is config object, where you can set headers and onUploadProgress callback

axios.patch(url, j, {
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('accessToken')
  },
  onUploadProgress: progressEvent => {
    this.basic.status = 'Uploaded: ' + progressEvent.loaded + 'b of ' + progressEvent.total + 'b'
  }
}).then(response => (this.handleUploadComplete(response)));