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

1

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.

answered Dec 31, 2018 at 21:08

clusterBuddy

1,55415 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

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'

answered Jan 2, 2019 at 3:36

Hoang Subin

7,5608 gold badges42 silver badges58 bronze badges

Comments

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

0

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.

answered Dec 31, 2018 at 23:44

Dabbas

3,2608 gold badges51 silver badges78 bronze badges

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