screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h3>Vue.js Convert Image to Base64</h3> <div id="app"> <input type="file" @change="convertToBase64" accept="image/*" /> <br /> <div v-if="showImage"> <img :src="base64textString" :alt="imageName" /> </div> <br /> <textarea v-model="base64textString" rows="5"></textarea> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { base64textString: '', imageName: '', showImage: false }; }, methods: { convertToBase64(event) { const file = event.target.files[0]; this.imageName = file.name; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { this.base64textString = reader.result; this.showImage = true; }; reader.onerror = (error) => { console.log('Error: ', error); }; } } }); </script> <style scoped> body { font-family: sans-serif; margin: 0; padding: 0; } #app { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f8f8f8; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); } h3 { text-align: center; margin-top: 0; } input[type="file"] { margin-bottom: 10px; } textarea { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; resize: none; } img { max-width: 100%; height: auto; } </style> </body> </html>