Use Dropzone to upload images and display back examples, and dropzone to upload images

Use Dropzone to upload images and display back examples, and dropzone to upload images

I. Problems Related to image uploading
1. introduce such code into the HTML page

    <div class="row">        <div class="col-md-12">            <form dropzone2  class="dropzone" enctype="multipart/form-data" method="post"></form>        </div>    </div>

2. Send a POST request in the command
The key code is as follows:

 var manage = angular.module('hubBrowseManageDirectives', []);    manage.directive('dropzone2', function () {        return {            restrict: 'EA',            controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {                $element.dropzone({                    url : "rest/components/"+$scope.component.name+"/"+$scope.component.version+"/images",                    autoDiscover : false,                    autoProcessQueue: true,                    addRemoveLinks: true,                    addViewLinks: true,                    acceptedFiles: ".jpg,.png",                    dictDefaultMessage: "upload head picture",                    maxFiles : "1",                    dictMaxFilesExceeded: "Only can upload one picture, repeat upload will be deleted!",                    init: function () {                     var mockFile = { name: "Filename",                                       size: 10000                                     };                     this.emit("addedfile", mockFile);                     mockFile._viewLink.href = "rest/components/"+$scope.component.name+"/"+$scope.component.version +"/"+$scope.component.image;                     mockFile._viewLink.name = $scope.component.image;                     this.emit("thumbnail", mockFile, "rest/components/"+$scope.component.name+"/"+$scope.component.version +"/"+$scope.component.image);                     this.emit("complete", mockFile);                        $(".dz-view").colorbox({                               rel:'dz-view',                                width:"70%",                               height:"80%"                        });                        this.on("error", function (file, message) {                            alert(message);                            this.removeFile(file);                        });                        this.on("success", function(file,imageInfo) {                          file._viewLink.href = imageInfo.newfile;                          file._viewLink.name = imageInfo.newfile;                           $scope.$apply(function() {                                $scope.component.image="rest/components/"+$scope.component.name+"/"+$scope.component.version+"/"+imageInfo.newfile;                           });                        });                        this.on("removedfile", function(file) {                           var removeFileUrl = file._viewLink.name;                                if($scope.component.image == removeFileUrl){                                    this.removeFile(file);                                }                          });                    }                });            }]        };    });

Note that the request method of the preceding URL must be allowed in the Angular simulation request. The format is as follows:

var hubMock = angular.module('hubMock', ['ngMockE2E']);    hubMock.run(['$httpBackend', '$http', function ($httpBackend, $http) {        $httpBackend.whenGET(/\.html/).passThrough();        $httpBackend.whenGET(/\.json/).passThrough();        $httpBackend.whenPOST(/rest\/components\/.+\/.+\/images/).passThrough();    }]);

$ HttpBackend. whenPOST (/rest \/components \/. + \/. + \/images/). passThrough (); Allow Image Upload and sending as a POST request.

3. Store the uploaded image locally.

 @POST    @Path("/{componentName: \\w+}/{version: \\d\\.\\d\\.\\d}/images")    @Produces(MediaType.APPLICATION_JSON)    public Response uploadMyComponentImage(@Context HttpServletRequest request, @PathParam("componentName") String componentName,            @PathParam("version") String version) {        Map<String, String> infoMap = componentService.uploadMyComponentImage(request, componentName, version);        return Response.ok(infoMap).build();    }

4. process the Image Upload location through the interface and its implementation class

  @Override    public Map<String, String> uploadMyComponentImage(HttpServletRequest request, String componentName, String version) {        Map<String, String> infoMap = new HashMap<String, String>();        String url = null;        try {            url = application.getStorageLocation(File.separator + componentName + File.separator + version).getAbsolutePath();        } catch (IOException e1) {            e1.printStackTrace();        }        DiskFileItemFactory factory = new DiskFileItemFactory();        ServletFileUpload upload = new ServletFileUpload(factory);        try {            Map<String, List<FileItem>> items = upload.parseParameterMap(request);            for (Entry<String, List<FileItem>> entry : items.entrySet()) {                String key = entry.getKey();                Iterator<FileItem> itr = items.get(key).iterator();                while (itr.hasNext()) {                    FileItem item = itr.next();                    String newfileName = UUID.randomUUID().toString() + "-" + item.getName();                    infoMap.put("newfile", "" + newfileName);                    File file = new File(url);                    if (!file.exists()) {                        file.mkdirs();                    }                    file = new File(url + File.separator + "img" + File.separator + newfileName);                    item.write(file);                }            }        } catch (FileUploadException e) {            e.printStackTrace();        } catch (Exception e) {            e.printStackTrace();        }        return infoMap;    }

Here, a map is returned, the key is newfile, and the value is "+ newfileName. Therefore, the image information can be obtained after the upload is successful, as shown in the following example imageInfo. newfile ;:

 this.on("success", function(file,imageInfo) {                          file._viewLink.href = imageInfo.newfile;                          file._viewLink.name = imageInfo.newfile;                           $scope.$apply(function() {                                $scope.component.image="rest/components/"+$scope.component.name+"/"+$scope.component.version+"/"+imageInfo.newfile;                           });                        });

2. How do I display images on the page?

1. Currently, the method of obtaining images on a website is mainly to send a Get request to the browser. Here, the method of actively requesting images is also used.

When the page is displayed, a request is sent:

"Rest/components/" + Scope. component. name + "/" + Scope. component. version + "/" + $ scope. component. image

The actual Request Path is as follows:

Localhost: 8080/xxxxxx/rest/components/2_component1/1.0.0/0c6684ad-84df-4e0e-8163-9e2d179814e6-Penguins.jpg

2. How does the backend accept and process requests?
See the following code to return to the browser is actually an output stream.

Key code example

/*** Get pictures OutputStream ** @ param componentName * @ param version * @ return */@ GET @ Path ("/{componentName: \ w +}/{version: \ d \\. \ d \\. \ d}/{imagePath :. +} ") @ Produces (MediaType. APPLICATION_OCTET_STREAM) public Response findImages (@ PathParam ("componentName") final String componentName, @ PathParam ("version") final String version, @ PathParam ("imagePath") final String imagePath) {StreamingOu Tput output = new StreamingOutput () {private BufferedInputStream bfis = null; public void write (OutputStream output) throws IOException, WebApplicationException {try {String filePath = ""; // determine whether the request path of the image is a long path. The if (imagePath. contains ("/") {// retrieve the image filePath = application. getStorageLocation (File. separator + componentName + File. separator + version) + File. separator + "img" + File. separator + ImagePath. split ("/") [imagePath. split ("/"). length-1];} else {// retrieve the image filePath = application. getStorageLocation (File. separator + componentName + File. separator + version) + File. separator + "img" + File. separator + imagePath;} bfis = new BufferedInputStream (new FileInputStream (filePath); int read = 0; byte [] bytes = new byte [1024]; while (read = bfis. read (bytes ))! =-1) {output. write (bytes, 0, read) ;}} catch (Exception e) {e. printStackTrace () ;}finally {try {if (bfis! = Null) {bfis. close ();} output. flush (); output. close () ;}catch (Exception e2) {e2.printStackTrace () ;}}}; // return Response to the browser. OK (output, MediaType. APPLICATION_OCTET_STREAM ). build ();}

3. When you click view, the system will request the background to return a preview of the large image. Here, the colorbox plug-in is used to preview and rotate the large image. It feels cool.

The effect is as follows: