图片base64在vue展示,base64存储MySQL
vue,element展示base64
<el-form-item label="图片:" prop="base64">
<div class="demo-image__preview">
<el-image :src="`${base64}`" :preview-src-list="srcList" />
<!-- 如果传入的没有前缀的(有时候前端传递给后端,传递时会去除data:image/png;base64),如下:<img :src="`data:image/png;base64,${base64}`" /> -->
</div>
</el-form-item>
data() {
return {
srcList: [],
base64: null // 数据库里base64字符串
}
}
MySQL存储base64
MySQL中可以用text存储base64,mysql中text 最大长度为65,535(2的16次方–1)字符的TEXT列。
但是text长度不够,可以选择:
- MEDIUMTEXT最大长度为16,777,215
- LONGTEXT最大长度为4,294,967,295
mysql中的text对应oracle中的clob,又分为TINYTEXT, TEXT, MEDIUMTEXT,LONGTEXT, 都是表示数据长度类型的一种。
text 和 char varchar blob这几种类型的区别:
char:定长,最大255个字符
varchar:变长,最大65535个字符(既是单列的限制,又是整行的限制)
text:变长,有字符集的大对象,并根据字符集进行排序和校验,大小写不敏感
blob:变长,无字符集的二进制大对象,大小写敏感