el-upload上传图片base64格式转换
html结构
<el-form-item label="二维码缩略图" prop="qrcode">
<div class="img-show" v-if="imgUrl">
<img :src="imgUrl" class="avatar">
<span class="actions">
<span class="item">
<i class="el-icon-delete" @click="del()"></i>
</span>
</span>
</div>
<el-upload
v-else
class="avatar-uploader"
action="#"
:on-success="handleQrCodeUploadSuccess"
accept=".png"
:before-upload="beforeQrCodeUpload"
:on-change="imgPreview"
:auto-upload="false"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
js
imgUrl:'',
imgcode:'',
handleQrCodeUploadSuccess(file) {
},
beforeQrCodeUpload(file) {
console.log(file,'file')
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('二维码缩略图大小不能超过 2MB!');
}
return isLt2M;
},
del(){
this.imgUrl = '';
this.dialogUrl = '';
this.imgcode = ''
},
imgPreview(file){
//生成临时缩略图
this.imgUrl = URL.createObjectURL(file.raw);
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = (e) => {
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
this.imgcode = e.target.result.split('base64,')[1];
}
},
crud.form.thumbnailBase64 = this.imgcode
crud.form.thumbnail = this.imgUrl
这里上传通过转换imgcode 为base64.
爱生活、爱编程!

浙公网安备 33010602011771号