JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
<div id="app">
<input type="file" @change="readFile" ref="file">
<img :src="src" alt="" width=200, height=200>
</div>
JavaScript
new Vue({
el: "#app",
data: function() {
return {
src: "",
}
},
methods: {
readFile: function() {
var file = this.$refs.file.files[0];
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
//图片url
vm.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
})