Mixing
Vue2 getting image src
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.
javascript vue.js vuejs2 filereader
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
add a comment |
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.
javascript vue.js vuejs2 filereader
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
add a comment |
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.
javascript vue.js vuejs2 filereader
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
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.
javascript vue.js vuejs2 filereader
javascript vue.js vuejs2 filereader
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
edited Dec 31 '18 at 23:25
Boussadjra Brahim
8,1843733
8,1843733
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
asked Dec 31 '18 at 21:01
clusterBuddyclusterBuddy
626415
626415
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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 at 3:36
Hoang Tran SonHoang Tran Son
18719
add a comment |
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 '18 at 21:08
clusterBuddyclusterBuddy
626415
add a comment |
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 '18 at 23:44
DabbasDabbas
1,60852858
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991390%2fvue2-getting-image-src%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 at 3:36
Hoang Tran SonHoang Tran Son
18719
add a comment |
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 at 3:36
Hoang Tran SonHoang Tran Son
18719
add a comment |
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 at 3:36
Hoang Tran SonHoang Tran Son
18719
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 at 3:36
Hoang Tran SonHoang Tran Son
18719
answered Jan 2 at 3:36
Hoang Tran SonHoang Tran Son
18719
answered Jan 2 at 3:36
Hoang Tran SonHoang Tran Son
18719
answered Jan 2 at 3:36
Hoang Tran SonHoang Tran Son
18719
18719
add a comment |
add a comment |
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 '18 at 21:08
clusterBuddyclusterBuddy
626415
add a comment |
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 '18 at 21:08
clusterBuddyclusterBuddy
626415
add a comment |
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 '18 at 21:08
clusterBuddyclusterBuddy
626415
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 '18 at 21:08
clusterBuddyclusterBuddy
626415
answered Dec 31 '18 at 21:08
clusterBuddyclusterBuddy
626415
answered Dec 31 '18 at 21:08
clusterBuddyclusterBuddy
626415
answered Dec 31 '18 at 21:08
clusterBuddyclusterBuddy
626415
626415
add a comment |
add a comment |
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 '18 at 23:44
DabbasDabbas
1,60852858
add a comment |
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 '18 at 23:44
DabbasDabbas
1,60852858
add a comment |
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 '18 at 23:44
DabbasDabbas
1,60852858
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 '18 at 23:44
DabbasDabbas
1,60852858
answered Dec 31 '18 at 23:44
DabbasDabbas
1,60852858
answered Dec 31 '18 at 23:44
DabbasDabbas
1,60852858
answered Dec 31 '18 at 23:44
DabbasDabbas
1,60852858
1,60852858
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991390%2fvue2-getting-image-src%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
