如何使用angularjs和spring上传服务器文件夹中的图像

Question

Im using angularjs in client side and spring ,hibernate in server side. Now im trying to upload the image , which could be saved in a server folder and the path where it stored can save in sql db . Im struggling to read the image using angularjs with spring . Kindly guide me to complete my task Thanks in advance

Answer 1

There is a project called Spring Content that allows you to create content management applications with very little code. Take a look at the Getting Started guides here and here .

This project also has a demo application called spring docs that acts as a reference showing how an angular (1.x) front-end can talk to a Spring Content backend. From a file upload perspective all the work on the front-end is done by a Danial Farid's excellent ng-upload component. This video then walks through the backend code showing just how easy it is to create that. Follow these and you should be up and running in no-time.

Based on your additional details this would look something like this:-

pom.xml

<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>spring-content-rest-boot-starter</artifactId>
    <version>0.0.10</version>
</dependency>
<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>content-fs-spring-boot-starter</artifactId>
    <version>0.0.10</version>
</dependency>

SpringBootApplication.java

@SpringBootApplication
public class YourSpringBootApplication {

  public static void main(String[] args) {
    SpringApplication.run(YourSpringBootApplication.class, args);
  }

  @Configuration
  @EnableFilesystemStores
  public static class StoreConfig {
    File filesystemRoot() {
        // return root of your image store
    }

    // this bean is the spring resource loader that will be used by
    // the product store  
    @Bean
    public FileSystemResourceLoader fsResourceLoader() throws Exception 
    {
      return new FileSystemResourceLoader(filesystemRoot().getAbsolutePath());
    }
  }

  @StoreRestResource(path="addTest")
  public interface ProductImagesStore extends Store<String> {
    //
  }
}

This will be enough to create a backend service that your angular front-end can POST multipart file requests too and subsequently GET from. Note, no controller code. Spring Content REST doesn't currently support more than one multipart file so you would have to modify test.js for call $hhtp.port multiple times, one for each product image. Also happy to work with you to add this functionality into Spring Content too.

Answer 2

In order upload a file along with data using angularjs and spring , here are the code `

test.js

               var url = "addTest";                    
               var data = new FormData();
               data.append('vendorId', $scope.vendorId);
               data.append('categoryId', _ddlCategory);
               data.append('subCategoryId', _ddlSubCategory);
               data.append('productName', _productName);
               data.append('productImage1', 'image1');
               data.append('productImage2', 'image2');
               data.append('productImage3', 'image3');
               data.append('productImage4', 'image4');
               data.append('productImage5', 'image5');
               data.append('productImagePath1', file1);
               data.append('productImagePath2', file2);
               data.append('productImagePath3', file3);
               data.append('productImagePath4', file4);
               data.append('productImagePath5', file5);
               data.append('specification', _productspec);
               data.append('terms', _termsDescription);

               var config = {
                    transformRequest: angular.identity,
                    transformResponse: angular.identity,
                    headers : {
                        'Content-Type': undefined
                    }                      
               }    

               $http.post(url, data, config).then(function (response) {
                    $scope.uploadResult=JSON.parse(response.data);

                }, function (data, status, headers, config) {
                    //$scope.uploadResult=response.data;
                    console.log('errorresult '+ data);

                });

controller.java

@RequestMapping(value = "/addTest", method = RequestMethod.POST, headers = "Content-Type=multipart/form-data", consumes = {
"multipart/form-data" })
public @ResponseBody <Base64Binary> String addProductTest(@RequestParam("vendorId") Long vendorId,
@RequestParam("categoryId") Long categoryId, @RequestParam("subCategoryId") Long subCategoryId,
@RequestParam("productName") String productName,
@RequestParam("productDescription") String productDescription,
@RequestParam("productQuantity") Long productQuantity, @R
@RequestParam("productImagePath1") MultipartFile file1,
@RequestParam("productImagePath2") MultipartFile file2,
@RequestParam("productImagePath3") MultipartFile file3,
@RequestParam("productImagePath4") MultipartFile file4,
@RequestParam("productImagePath5") MultipartFile file5, @RequestParam("specification") String specification,
@RequestParam("terms") String terms)
throws ApplicationException, JsonIOException, JsonSyntaxException, IOException, ParseException {