图片转base64存本地

Question

场景

1. 有上传图片的功能。

2. 没有上传接口。

3. 客户需要看到该功能的效果。

需求

1. 上传图片时将图片转成base64编码格式保存至本地。

2. 对应组件img标签渲染相应的base64编码展示图片。

技术栈

react + mobx + ...

---

有做过类似功能的能不能具体说下怎么做的？

Answer 1

用户选完图片，直接使用js将图片转成base64然后给img.src便可显示

Answer 2

可以使用FileReader

Answer 3

var myfile = document.getElementById('file');&nbsp; &nbsp;&nbsp;var List = document.getElementsByClassName('list')[0];myfile.onchange = function(){&nbsp; &nbsp; &nbsp; &nbsp; var files = this.files;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0;i<files.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oFReader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oFReader.readAsDataURL(files[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oFReader.onload = function (oFREvent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(oFReader);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oLi = '<li><img src="'+oFREvent.target.result+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; List.innerHTML+=oLi;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }oFREvent.target.result为base64地址，直接赋给src就行了