How is the most simples way to convert input[type=file] into a string base64 in Vue (with javascript)?
I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.
I have something like this in my Vue server (using bootstrap-vue):
<template>
<div class="row">
<!-- Send Image -->
<div class="col-sm-8 ml-auto mr-auto">
<b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
<b-button v-on:clicl="submitFile()">Enviar</b-button>
</div>
</div>
</template>
export default {
name: 'imagem',
data(){
return{
file: ''
}
},
methods:{
submitFile () {
let stringBase64 = wantToConvertFile(this.file);
}
}
}
So how is the simple way to make sometring similar of
"wantToConvertFile( )"?
Bootstrap-VUE - Form File Input
file vue.js input base64
asked Nov 12 at 17:49
Sham Fiorin
188
add a comment |
I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.
I have something like this in my Vue server (using bootstrap-vue):
<template>
<div class="row">
<!-- Send Image -->
<div class="col-sm-8 ml-auto mr-auto">
<b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
<b-button v-on:clicl="submitFile()">Enviar</b-button>
</div>
</div>
</template>
export default {
name: 'imagem',
data(){
return{
file: ''
}
},
methods:{
submitFile () {
let stringBase64 = wantToConvertFile(this.file);
}
}
}
So how is the simple way to make sometring similar of
"wantToConvertFile( )"?
Bootstrap-VUE - Form File Input
file vue.js input base64
asked Nov 12 at 17:49
Sham Fiorin
188
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14
add a comment |
I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.
I have something like this in my Vue server (using bootstrap-vue):
<template>
<div class="row">
<!-- Send Image -->
<div class="col-sm-8 ml-auto mr-auto">
<b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
<b-button v-on:clicl="submitFile()">Enviar</b-button>
</div>
</div>
</template>
export default {
name: 'imagem',
data(){
return{
file: ''
}
},
methods:{
submitFile () {
let stringBase64 = wantToConvertFile(this.file);
}
}
}
So how is the simple way to make sometring similar of
"wantToConvertFile( )"?
Bootstrap-VUE - Form File Input
file vue.js input base64
asked Nov 12 at 17:49
Sham Fiorin
188
I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.
I have something like this in my Vue server (using bootstrap-vue):
<template>
<div class="row">
<!-- Send Image -->
<div class="col-sm-8 ml-auto mr-auto">
<b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
<b-button v-on:clicl="submitFile()">Enviar</b-button>
</div>
</div>
</template>
export default {
name: 'imagem',
data(){
return{
file: ''
}
},
methods:{
submitFile () {
let stringBase64 = wantToConvertFile(this.file);
}
}
}
So how is the simple way to make sometring similar of
"wantToConvertFile( )"?
Bootstrap-VUE - Form File Input
file vue.js input base64
file vue.js input base64
asked Nov 12 at 17:49
Sham Fiorin
188
asked Nov 12 at 17:49
Sham Fiorin
188
asked Nov 12 at 17:49
Sham Fiorin
188
asked Nov 12 at 17:49
Sham Fiorin
188
asked Nov 12 at 17:49
Sham Fiorin
188
188
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14
add a comment |
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14
add a comment |
1 Answer
1
active
oldest
votes
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
answered Nov 12 at 18:12
artoju
12114
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
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%2f53267520%2fhow-is-the-most-simples-way-to-convert-inputtype-file-into-a-string-base64-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
answered Nov 12 at 18:12
artoju
12114
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
add a comment |
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
answered Nov 12 at 18:12
artoju
12114
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
add a comment |
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
answered Nov 12 at 18:12
artoju
12114
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
answered Nov 12 at 18:12
artoju
12114
answered Nov 12 at 18:12
artoju
12114
answered Nov 12 at 18:12
artoju
12114
answered Nov 12 at 18:12
artoju
12114
12114
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
add a comment |
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
with this solution stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue
– Sham Fiorin
Nov 13 at 19:18
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53267520%2fhow-is-the-most-simples-way-to-convert-inputtype-file-into-a-string-base64-in%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
I believe that the best way is to use "vuex"
– Sham Fiorin
Nov 13 at 19:14