Vue2 getting image src

Question

I have a function that gets images from an array

onFileChange(e) { let files = e.target.files; for (let file in files) { this.files.push(URL.createObjectURL(files[file])); if (files.hasOwnProperty(file)) { console.log(files[file]); } }

Which is triggered by this element:

<input multiple type="file" @change="onFileChange($event)"/>

My data object for this component is:

data() { return { files: [], url: null, uploadedFiles: [] }

When I render I get this error:

app.js:1920 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

I am actually getting the file array. but with this error, help appreciated.

clusterBuddy · Accepted Answer · 2018-12-31 21:08:14Z

I still have no idea why this error occured yet i've found a workaround by switch from for/in to a regular "boring" for.

 for (var i = 0; i < files.length; i++) { var file = files[i], src = (window.URL || window.webkitURL).createObjectURL(file); this.files.push(src); }

If there'll be an answer that would explain the error, ill vote it as the answer, this this is the best solve found by now.

Hoang Subin · Accepted Answer · 2019-01-02 03:36:14Z

I think the problem is from this line this.files.push(URL.createObjectURL(files[file]));

It should be this.files.push(window.URL.createObjectURL(files[file])); in case of {}.toString.apply(files[file]) === '[object Blob]'

Otherwise,

const binaryData = []; binaryData.push(files[file]); window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

Ref: Failed to execute 'createObjectURL'

Dabbas · Accepted Answer · 2018-12-31 23:44:46Z

I think your problem is not with for and for...in, it's with window.URL.
After you used this:

(window.URL || window.webkitURL).createObjectURL

Instead of this (URL => window.URL):

URL.createObjectURL

It worked for you, it's a browser compatibility issue.

Collectives™ on Stack Overflow

Vue2 getting image src

I have a function that gets images from an array

Which is triggered by this element:

My data object for this component is:

When I render I get this error:

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

I have a function that gets images from an array

Which is triggered by this element:

My data object for this component is:

When I render I get this error:

3 Answers 3

Comments

Comments

Comments

Related