后台返回的图片信息为base64格式,前端进行渲染
<el-button @click="scBtnImageClick">生成</el-button> <img :src="scBtnImageUrl" class="avatar-uploader-icon">
请求接口成功进行渲染
this.scBtnImageUrl = 'data:image/png;base64,'+res.data.img
上传图片转为base64格式给后台(vue+elementUI)
<el-upload :auto-upload="false" :show-file-list="false" :on-change="onChangeUpload" accept="image/jpeg,image/png" class="avatar-uploader" action="https://yy.xx.com"> > <el-button>上传</el-button> </el-upload> <img v-if="imageUrlUpload" :src="imageUrlUpload" class="avatar-uploader-icon">
/** base64处理 */ getBase64 (file) { return new Promise(function (resolve, reject) { let reader = new FileReader() let imgResult = '' reader.readAsDataURL(file) reader.onload = function () { imgResult = reader.result } reader.onerror = function (error) { reject(error); } reader.onloadend = function () { resolve(imgResult); } }) }, /** 上传操作 */ onChangeUpload (file) { this.getBase64(file.raw).then(res => { this.imageUrlUpload = res }) },