elementUI中上传图片保存为base64,如何回显?

ruby
  • 41

开始用el-upload组件上传图片,图片用base64保存在数据库,再次编辑的时候如何回显图片

回复
阅读 619
3 个回答
✓ 已被采纳

直接src属性,或background:url()赋值就行

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/2wBDARweHigjKE4rK06kbl1upKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT/wAARCAA1ADgDASIAAhEBAxEB/8QAGgAAAwADAQAAAAAAAAAAAAAAAAMEAQIFBv/EAC4QAAIBAwIFAgUEAwAAAAAAAAECAwAEERIhMUFRYXEFExQVIiOhJIGRwTNCcv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A9LU8tzDEQskscZI2DMAaZgZHjPQV5wTRRzTrNbma9ZyAHXUoA4YPLag773VvEuppkAIzksKR83sM7XSHwCaxDY23trJ8IgkIzpO4GfNVCCNdhCgHZRQLjvLeRWZJ0KrxOobH96bFPFKMJIj/APLA0mSxtXXDQRk5zuuxPfrXIuoisggW2Rbot9uSEaFXyefig9FRS4g4iQSHLgDVjrRQKu5Bb28s22UUkDpUvpFmsdqk8iq00g1liOu9VXMAlt5ISQFdSGJ471N6XcarcW8v0zwAI643GOBHbFBteXN1C4EdurAnGpmwB3rS1ur6bWGt410nAfV9LeKfcSyKwAMaq3Mgn8VpLNIpBheErjJ1ZBHgCohNr8xknL3De0mr/HpBGPPHPeqL+3+ItyinEi/UjZzpYbg0W4MgR2l1ZydkKg/saqIxjHXfvVUmxuPibWOU7MRhh0I2P5oqb0r7b3cXJZyR2BAOKKDpYBrjvbrfeoSyBmj9jCK68dXP+q6zuERmPBQT/Fcr0+4itrOJ5XAM5eUk89+P8YoL4oGESiV/cdf9iMZrWW0WQghpE66HIz5H98aZbTe/CkmgpqGcE7inUC4o1jQKgwBwrJIJHMDvzqS9ubiF09qBpVOQQvHPLPQd6ZZwtBbqsjapN2dupJyaBHp5/WX3T3QPxRR6WNVvLMQR7szuAehOB+BRQXSKHRlPAgikJZQJFFEyBxGBpLDOKKKCnTgDFZoooNdscKyAGG9FFBgALsOlFFFB/9k=" alt="">

同样可以回显

只不过不知道你在数据库保存的时候有没有前缀 data:image/jpg;base64。而且看你是什么操作,我记得是有个 fileList 还是什么的东西

最近做到类似的需求了,我的场景是 将剪切板中的图放到页面中回显,恰好剪切板中存放的图片格式也是 Base64.


下面是解决方案


通过和后端协商好,上传之前的 Base64 格式,约定好格式后,就是前端接收后端返回的数据,然后按照 前后的数据约束 就行 动态拼接数据 放到 <img :src="变量"> 中 即可,就可以回显数据了。

你知道吗?

宣传栏