图片上传转base64格式传给后台,以及上传图片的展示

之前项目上有个需要上传图片的功能,第一次了解到了base64这个东西(百科:base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法)。做出来的效果如下:


点击上传,将图片展示在图片区域,并将图片转化为base64格式进行后台的数据交互,具体代码如下:

css:

解决input type=file的自带样式问题,以及文件上传前的图片区域样式问题

<style scoped>
.avatar-uploader .el-upload {
width: 100%;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
float: inherit;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon,img {
font-size: 28px;
color: #8c939d;
width: 100%;
max-width: 500px;
min-width: 250px;
height: 200px;
line-height: 200px !important;
text-align: center;
float:left;
position: relative;
}
.avatar {
width: 100%;
height: 300px;
display: block;
}
.img-border {
border: 1px dashed #d9d9d9;
}
input[type="file"]{
width: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.up-file {
margin-left:10px;
padding: 4px 10px;
text-align: center;
line-height: 40px;
cursor: pointer;
background: #5f91d0;
color: #FFFFFF;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
}
.display-none{
display: none
}
</style>

html:

<FormItem label="上传证件照类型">
<RadioGroup v-model="imgType">
<Row>
<Radio label="01">身份证</Radio>
<Radio label="02">港澳台通行证</Radio>
<Radio label="03">护照</Radio>
</Row>
</RadioGroup>
</FormItem>
<FormItem label="身份证正面" v-if="imgType=== '01'" prop="idCardFace">
<Row>
<Col>
<Input class="display-none" v-model="formInfo.idCardFace"></Input>
<img v-if="idCardFace" :src="idCardFace" class="avatar">
<i v-else class="img-border el-icon-plus avatar-uploader-icon"></i>
<div class="up-file">
<form ref="idCardFaceForm">
<input accept="image/*" name="upimage" ref="uploadFile2" type="file" @change="idCardFacebase64"> 身份证正面
</form>
</div>
</Col>
</Row>
</FormItem>
</Col>

js:

reader.readAsDataURL(file);将图片转换成base64编码格式,_this.idCardFace = reader.result;放置图片区域位置显示图片

idCardFacebase64() {//上传身份证
var _this=this;
var file = this.$refs.uploadFile2.files[0];
_this.uploadImg=true;
if(_this.beforeAvatarUpload(file)){
var reader = new FileReader(); //本地预览
reader.readAsDataURL(file); //Base64
reader.onload = function(){
var temp ={
certTypeCode:'0101',
certTypeName:'身份证正面',
imRfc2397: reader.result
};
_this.formInfo.certList[1] = temp;
_this.idCardFace = reader.result;//reader.result;就是base64编码格式
_this.formInfo.idCardFace = _this.idCardFace;
}
}
},

显示图片的原理:img的src=base64编码即可显示。

展开阅读全文

没有更多推荐了,返回首页