Vue input[type=file]上传图片并转为base6
2020-08-25 本文已影响0人
__鹿__
input[type = file] 文件 转换 base64地址,再渲染到页面上。
<div class="updatePhoto">
{{userPhoto }}
<input class="addPicInput" id="userAvatar" type="file" ref="uploadFile" @change="fileChange($event)" accept="image/*" multiple>
</div>
export default {
data() {
return {
userPhoto: "",
};
},
methods: {
fileChange(event) {
var that = this
var files = document.getElementById("userAvatar").files[0]
var reader = new FileReader();
reader.onloadend = function () {
that.userPhoto = reader.result;
console.log(reader.result)
};
if (files) {
reader.readAsDataURL(files);
}
},
}