<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #app { 94%; margin: 20px auto; } .t5 { margin-top: 5px; } .t10 { margin-top: 10px; } .text { 100%; height: 360px } </style> </head> <body> <div id="app"> <p>base64图片互转</p> <input type="file" accept="image/*" id="file" @change="toBase64(event)"> <div class="t10"> <textarea class="text" v-model="txt"></textarea> </div> <div class="t5"> <button @click="toImage">转为图片</button> <img :src="src" alt=""> </div> </div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { txt: '', src: '' }, methods: { toBase64: function (event) { let file = event.target.files[0]; if (!/image/w+/.test(file.type)) { alert('请确保文件为图像类型'); return } let that = this; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (event) { that.txt = event.target.result } }, toImage() { this.src = this.txt } } }) </script> </body> </html>