图片转base64存本地

Question

场景有上传图片的功能。没有上传接口。客户需要看到该功能的效果。需求上传图片时将图片转成base64编码格式保存至本地。对应组件img标签渲染相应的base64编码展示图片。技术栈react + mobx + ...有做过类似功能的能不能具体说下怎么做的？

Answer 1

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

Answer 2

可以使用FileReader

Answer 3

var myfile = document.getElementById('file');    

var List = document.getElementsByClassName('list')[0];

myfile.onchange = function(){

        var files = this.files;

        for(var i = 0;i<files.length;i++){

            var oFReader = new FileReader();

            oFReader.readAsDataURL(files[i]);                            

            oFReader.onload = function (oFREvent) {

            console.log(oFReader);

            var oLi = '<li><img src="'+oFREvent.target.result+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';    

            List.innerHTML+=oLi;

            };

        }

    }

oFREvent.target.result为base64地址，直接赋给src就行了