之前项目上有个需要上传图片的功能，第一次了解到了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编码即可显示。