鍍金池/ 問答/HTML/ 圖片轉(zhuǎn)base64存本地

圖片轉(zhuǎn)base64存本地

場景

  1. 有上傳圖片的功能。

  2. 沒有上傳接口。

  3. 客戶需要看到該功能的效果。

需求

  1. 上傳圖片時將圖片轉(zhuǎn)成base64編碼格式保存至本地。

  2. 對應組件img標簽渲染相應的base64編碼展示圖片。

技術(shù)棧

react + mobx + ...

有做過類似功能的能不能具體說下怎么做的？

回答
編輯回答
替身

可以使用FileReader

2017年3月22日 15:12
編輯回答
笨笨噠

我剛剛做好一個圖片上傳預覽的,不過是vue的

clipboard.png

<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
        }
      },
2018年9月14日 03:48
編輯回答
孤毒

用戶選完圖片，直接使用js將圖片轉(zhuǎn)成base64然后給img.src便可顯示

2018年7月17日 03:50
編輯回答
墻頭草
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就行了

2018年2月24日 01:10