这里只是本地上传,拿图片的base64,并不向后台直接上传,拿到base64后手动上传
上传前效果:
上传后效果:
.vue
<el-form-item label="礼品封面"> ?????????????<el-upload ???????????????class="avatar-uploader" ???????????????action="" ???????????????:show-file-list="false" ???????????????:auto-upload="false" ???????????????:on-change="changeFile"> ???????????????<img id="giftImg" v-if="imageUrl" :src="imageUrl" class="avatar"> ???????????????<el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button> ?????????????</el-upload> ???????????</el-form-item>
.ts
?changeFile(file, fileList) { ???var This = this; ???//this.imageUrl = URL.createObjectURL(file.raw); ???var reader = new FileReader(); ???reader.readAsDataURL(file.raw); ???reader.onload = function(e){ ????????this.result // 这个就是base64编码了 ???????This.imageUrl = this.result; ???} ?}
有些东西就是试出来的,然后总结,~~~
el-upload怎么拿到上传的图片的base64格式
原文地址:http://www.cnblogs.com/XHappyness/p/8000643.html