【Java】【SpringBoot】基于BASE64的图片上传、存储-白红宇

【Java】【SpringBoot】基于BASE64的图片上传、存储

阅读量：5957 次

发布时间：2019-06-19

本文共 3287 字，大约阅读时间需要 10 分钟。

前台

上传控件：

<input type="file" class="custom-file-input" id="

homeImg" name='homeImg'/>

JS提交：

//保存图片信息      $scope.save = function () {        var fd = new FormData();        var file = document.getElementById('homeImg').files[0];        fd.append('homeImg', file);        $http.post(CommonConfig.RestBaseUrl.CaoBaoService + 'homeimgs/upload?id=' + $scope.detailInfo.id + '&sortNum=' + $scope.detailInfo.sortNum, fd, CommonConfig.fileUploadReqConfig)          .then(function (result) {  //正确请求成功时处理            console.log('save:result', result);            if (result.data.code == 'NONE_ERROR') {              $scope.modalContent = '保存成功！';              $('#myModal').modal('show');              $scope.getHomeImgs($scope.detailInfo.id);              $scope.resetDetailInfo();            }            else {              $scope.modalContent = '保存失败！';              $('#myModal').modal('show');            }          }).catch(function (result) { //捕捉错误处理            console.log(result);          });      };

请求参数设置：

CommonConfig. 
fileUploadReqConfig = { 
headers: { 
'Content-Type'
:
undefined }, 
transformRequest:
angular. 
identity
       }; 

前台展示：

<
img
src= 
"data:image/png;base64,{ 
{viewImgData}}"
width= 
"100%"
height= 
"100%"
alt= 
"无法显示"
/>

后台

后台Model中用String存储即可。

数据库采用MediumBlob类型。

后台Rest请求处理：

import org.apache.commons.codec.binary.Base64; @PostMapping(value = "/upload")    public RestRsp
      
        upload(HttpServletRequest request, @RequestParam @Nullable int sortNum, @RequestParam @Nullable String id)    {        RestRsp
       
         result = new RestRsp
        
         ();        HomeImgsMO mo = null;        try        {            List
         
           files = ((MultipartHttpServletRequest) request).getFiles("homeImg");            if (StringUtil.isNotEmpty(id))            {                mo = homeImgsBusiness.getById(id);                mo.setSortNum(sortNum);                if (CollectionUtil.isNotEmpty(files))                {                    mo.setImgData(Base64.encodeBase64String(files.get(0).getBytes()));                }                homeImgsBusiness.modify(mo);            }            else            {                if (CollectionUtil.isEmpty(files))                {                    throw new LittleCatException("upload home img:img is null.");                }                mo = new HomeImgsMO();                mo.setSortNum(sortNum);                mo.setImgData(Base64.encodeBase64String(files.get(0).getBytes()));                result.getData().add(homeImgsBusiness.add(mo));            }        }        catch (LittleCatException e)        {            result.setCode(e.getErrorCode());            result.setMessage(e.getMessage());            logger.error(e.getMessage(), e);        }        catch (Exception e)        {            result.setCode(Consts.ERROR_CODE_UNKNOW);            result.setMessage(e.getMessage());            logger.error(e.getMessage(), e);        }        return result;    }