(工作随记)VUE+ElementUI 照片墙上传回显 Base64转码

工作中需要做一个照片墙一样的东西，做出来的效果是这样的

官方文档在这里  http://element-ui.cn/#/zh-CN/component/installation

下面是一些代码片段，可以参考一下


      
        
        
                点击上传
                
        
      
只能上传jpg/png文件，且不超过500kb

                                                                      
      

      
    
        取消
    
        确认
  
      


//第二张图片的样式

  
    
  
    
    
        
      
            
    
        
    
        
      
            取消
      
            确认
    
        
  
   


 

下面的方法比较核心，是前端转码的方法 ，回显的话把Base64放到URL里就可以直接显示啦。如果不转码的话出来的url是blob:http://localhost:3000/f64f6f96-1eca-4c4b-8cd5-c20994e27cfa这个样子的，但是这个样子的链接地址放到后端去找图片转码会失败，因为转义的斜杠会变成反斜杠，找不到图片所以会失败，正在找解决的方法，暂且先在前端转码成功后传到后端。（有知道的小伙伴可以指教一下）

getBase64 (file) {
          //要上传的图片转Base64
    return new Promise(function (resolve, reject) {
    
    let reader = new FileReader()
    
    let imgResult = ''
    
    reader.readAsDataURL(file)
    
    reader.onload = function () {
      
        imgResult = reader.result
    
    }
    
    reader.onerror = function (error) {
      
        reject(error)
    
    }
    
    reader.onloadend = function () {
      
        resolve(imgResult)
    
    }
  
  })

}

change (file, fileList) {
    this.getBase64(file.raw).then(res => {
  
        console.log(res)            //转码之后的输出
    })
}

后端转Base64方法

public static String getImgStr(String imgFile){
    
    //将图片文件转化为字节数组字符串，并对其进行Base64编码处理
    
    InputStream in = null;
    
    byte[] data = null;
    
    //读取图片字节数组
    
    try
    {
        
        in = new FileInputStream(new File(imgFile));
        
        data = new byte[in.available()];
        in.read(data);
        in.close();
                
    }
    
    catch (IOException e)
    {
        
        e.printStackTrace();
    
    }
    
    return new String(Base64.encodeBase64(data));

}