How to get File type object from url (image) in vuejs

Question

I do have an image url lets say http://localhost/sample.jpg. i want to save this image url into a File object type as my component created. how can i achieve this with native js api?

export default {
  created () {
    const imageUrl = 'http://localhost/sample.jpg'
    const file = this.getFileFromUrl(imageUrl)
  },
  methods: {
    getFileFromUrl (url) {
      // ... what should i return?
    }
  }
}

Answer 1

One of the simple ways to do this is using fetch.

let url = '...'

fetch(url)
  .then(response => response.blob())
  .then(blob => {
    ...
  })

After you have blob you can convert it to file. See How to convert Blob to File in JavaScript.

Example