图片转base64存本地

Question

场景

1. 有上传图片的功能。

2. 没有上传接口。

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

需求

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

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

技术栈

react + mobx + ...

---

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

Answer 1

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就行了

Answer 2

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

Answer 3

可以使用FileReader

Answer 4

我刚刚做好一个图片上传预览的,不过是vue的

<input type="file" id="upload" @change='addImg' hidden="">
<img class="img" :src="img" alt="upload preview">
addImg(event) {
        var filter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        var reader = new FileReader();
        var file = event.target.files[0];
       
        if(!filter.test(file.type)) {
          alert("文件必须为图片!");
          return;
        }
        reader.readAsDataURL(file);
        var _this = this;
        reader.onloadend = function() {
          _this.img = reader.result
        }
      },