AngularJS实现图片预览并传到SpringBoot后台

最近要实现一个添加商品的功能，想着光添加文字有点单调。于是就想给商品配个图。参考下面这篇博客，我实现了图片预览功能：
通过AngularJS实现图片上传及缩略图展示
当然我的实现效果跟这篇博客还是略微有点差异。
其实还学习了另一篇博主的文章，不过现在找不到了
在首先需要引入下面两个js文件

<script type="text/javascript" src="../../js/ng-file-upload.js"></script>
<script type="text/javascript" src="../../js/ng-file-upload-shim.min.js"></script>

其实只引入第一个就可以了，第二个是为了不支持HTML5的浏览器使用的。

<div class="upload-button" type="file" capture="camera" ngf-select="uploadFiles($file,$errorfile)" ng-model="data.file" accept="image/jpeg,image/gif,image/png" ngf-max-height="1000" ngf-max-size="1MB">
    <img class="uploadpic img-rounded" src="{{imgSrc}}" ng-model="product.img"/>
    <div class="glyphicon glyphicon-camera uploadpic-label">点击上传照片</div>
</div>

上面这个布局的实现效果如下所示：
上面图片预览，下面文字
用户点击这一块儿区域的时候就可以上传图片。上传后的效果如下图所示
这里写图片描述
字有点偏左，强迫症忍了。
实现图片预览个代码如下所示：

/*
*首先需要添加模块 ngFileUpload （需要特别注意的是，Angular文件上传有两种js库，一种是这次使用的ng-file-upload，使用这个js库的时候添加的模块为ngFileUpload。
*另一种JS库是angular-file-upload，使用这个JS库的时候导入的模块是angularFileUpload
*/
var app = angular.module("new-stock", ['ngFileUpload']);
//这一部分的代码借鉴了上文的博主的文章，表示感谢
app.controller("form-controller", function($scope, $window, $http, Upload) {
    $scope.reader = new FileReader(); //创建一个FileReader接口
    $scope.form = { //用于绑定提交内容，图片或其他数据
        image: {},
    };
    $scope.thumb; //用于存放图片的base64

    $scope.uploadFiles = function(file, errorFile) { //单次提交图片的函数
        $scope.reader.readAsDataURL(file); //FileReader的方法，把图片转成base64
        $scope.reader.onload = function(ev) {
            $scope.$apply(function() {
                $scope.thumb = ev.target.result; //接收base64
            });
            $scope.imgSrc = $scope.thumb;
        };
    };

});

通过以上代码就能够实现点击图片之后实现实时图片预览。

光预览还不行，我们还需要文件上传。因为项目中新建商品传的东西比较多，于是就使用了Formdata直接传一个对象。看代码

$scope.addNewProduct = function(product) {

        var data = new FormData();
        data.append("productQuantity", product.productQuantity);
        data.append("productDescription", product.productDescription);
        data.append("productImg", product.productImg);

        $http({
            method: "POST",
            url: "http://127.0.0.1:8080/sale/product/new",
            data: data
            headers: {
                'Content-Type': undefined
            },
            transformRequest: angular.identity

        }).then(function successCallback(response) {
                console.log(response.data)
            },
            function errorCallback(response) {
                console.log("error")
                console.log(response);
            });
    }

上面的代码中有四个地方需要注意，

一个是创建FormData，使用var data = new FormData(); 创建一个FormData对象，然后使用append 添加属性。
二是在使用$http 传FormData的时候，要使用data传参数，而不能使用params
第三点是需要添加header 使用FormData传时要使用headers: {'Content-Type': undefined } ,并且要添加transformRequest: angular.identity
完成了这几项，前端的任务就算完成了。

在后台SpringBoot方面，我们需要使用@ResponseBody 来接收对象

 @PostMapping(value = "/new")
 @ResponseBody
 public ProductInfo addNewProduct(ProductInfo productInfo){
      System.out.println(productInfo.getProductDescription());
      return productInfo;
 }

然后一定要注意拼写，属性啥的不要出现拼写错误

AngularJS实现图片预览并传到SpringBoot后台

猜你喜欢