【Java】【SpringBoot】基於BASE64的圖片上傳、存儲

前台

上傳控件：

<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<String> upload(HttpServletRequest request, @RequestParam @Nullable int sortNum, @RequestParam @Nullable String id)
    {
        RestRsp<String> result = new RestRsp<String>();
        HomeImgsMO mo = null;

        try
        {
            List<MultipartFile> 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;
    }

POM：

<dependency>

<groupId>commons-codec</groupId>

<artifactId>commons-codec</artifactId>

<version>1.11</version>

</dependency>

 

提交數據庫操作：

public static final String CHARSET_NAME = "utf-8";

new SerialBlob(mo.getImgData().getBytes(Consts.CHARSET_NAME))