AngularJS implements image preview and transfers it to SpringBoot background

Recently, I want to implement a function of adding products, and it is a bit monotonous to add text only. So I wanted to add a picture to the product. Referring to the following blog, I implemented the image preview function:
Image upload and thumbnail display through AngularJS
Of course, my implementation is slightly different from this blog.
In fact, I also learned another blogger's article, but I can't find
it First, I need to introduce the following two js files

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

In fact, only the first one can be introduced, and the second one is for browsers that do not support 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>

The implementation effect of the above layout is as follows:

when the user clicks on this area, the image can be uploaded. The effect after uploading is shown in the figure below. The

word is a bit to the left, and the obsessive-compulsive disorder is tolerated.
The code to implement the image preview is as follows:

/*
*首先需要添加模块 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;
        };
    };

});

The above code can realize the real-time picture preview after clicking the picture.

Just preview is not enough, we also need file upload. Because there are many things to pass for new products in the project, Formdata is used to pass an object directly. see code

$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);
            });
    }

There are four places to pay attention to in the above code,

• One is to create FormData, var data = new FormData();create a FormData object using , then appendadd properties using .
• The second is when using $httpFormData to datapass parameters, but not to useparams
• The third point is that it needs to be added headerwhen using FormData to pass headers: {'Content-Type': undefined }, and to add transformRequest: angular.identity
  After these items are completed, the front-end tasks are completed.

On the backend SpringBoot side, we need to use @ResponseBodyto receive the object

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

Then be sure to pay attention to spelling, don't make spelling mistakes in attributes