主要在头像上传比较常见

后端处理方式：

  /***
    * @Description: 显示头像
    * @Author: lzw
    * @Date: 2020/12/21 21:19
    * @param yve930
    * @return: void
    **/
   @RequestMapping("showImg")
   public void showImg(Integer yve930) throws Exception {
       //将图片文件转化为字节数组字符串，并对其进行Base64编码处理
       String imgFile ="D:\20201222\lzw\headImg\a.jpg";
       if(imgFile!=null){
           if(new File(imgFile).exists()){
               InputStream inputStream = null;
               byte[] buffer = null;
               //读取图片字节数组
               try {
                   inputStream = new FileInputStream(imgFile);
                   int count = 0;
                   while (count == 0) {
                       count = inputStream.available();
                   }
                   buffer = new byte[count];
                   inputStream.read(buffer);
               } catch (IOException e) {
                   e.printStackTrace();
               } finally {
                   if (inputStream != null) {
                       try {
                           // 关闭inputStream流
                           inputStream.close();
                       } catch (IOException e) {
                           e.printStackTrace();
                       }
                   }
               }
               data="data:image/png;base64,"+new BASE64Encoder().encode(buffer);
           }
       }
       setData("data", t8LiuZhengWeiManageReadService.showImg(yve930));
   }

前端方法

 //js部分：
               this.Base.submit(null, {
                   url: "team8/LiuZhengWei/T8LiuZhengWeiManageRestService/showImg",
                   data: {}
               }).then(data => {
                   this.imageUrl = data.data.data
                   console.log('成功', data)
               }).catch(error => {
                   console.log('失败', error)
               });
       
//html部分：
        <img src="imageUrl" /> 

因为服务器上面的图片的地址无法在html中直接解析出来，所以只能通过base64编码处理图片编码；

前端Base64处理方式

    function getBase64(img, callback) {
        const reader = new FileReader()
        reader.addEventListener('load', () => callback(reader.result))
        reader.readAsDataURL(img)
    }