上传图片base64

关注

原创最新推荐文章于 2026-05-19 11:15:05 发布 488 阅读 AI 写同款· GEO 优化 ›

Spring Boot通过Base64上传图片最近这几天的实习工作，需要基于Spring做上传文件的接口，后来还要做一个基于Base64编码的单独上传图片的接口，图片经过base64编码后如下图。接收前台传过来的图片Base64编码和图片文件名后。我的解决思路：（1）把Base64编码转化为MultipartFile的形式，这就需要重写MultipartFile的方法了。重写MultipartFile的方法 /** * @auth... 阅读详情

1 html

上传预览
<div class="imgInputBox">
    <input id='headFile' type="file" class='imgInputBox_imgInput' name='headFile' @change=' getObjectURL'>
    <img :src="imgBase64" class='imgInputBox_img' id='headIcon'  alt="">
</div>

2 css

/*图片上传按钮*/
        .imgInputBox{
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 150px;
            background-color: #f7f7f7;
        }
        .imgInputBox .imgInputBox_imgInput{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
        }
        .imgInputBox .imgInputBox_img{
            display: block;
            width: 100%;
            height: 100%;
        }

3 js

getObjectURL(e){ 
          var file=e.target.files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file);
          var _this=this;
          reader.onload = (function (file) {
            return function (e) {
              _this.imgBase64=reader.result;//图片base64数据
            };
          })(file)
        },

收录于