Question

我在客户端和spring使用angularjs，在服务器端使用hibernate。现在我试图上传图像，该图像可以保存在服务器文件夹中，并且存储的路径可以保存在sql db中。我正在努力用弹簧使用angularjs来读取图像。请指导我完成我的任务提前致谢

Answer 1

有一个名为Spring Content的项目允许您使用非常少的代码创建内容管理应用程序。请查看入门指南here和here。

该项目还有一个名为spring docs的演示应用程序，它充当参考，显示角度（1.x）前端如何与Spring Content后端通信。从文件上传的角度来看，前端的所有工作都是由Danial Farid的优秀ng-upload组件完成的。这个video然后遍历后端代码，显示创建它的容易程度。按照这些，您应该立即启动并运行。

根据您的其他详细信息，这看起来像这样： -

的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> {
    //
  }
}

这足以创建一个后端服务，您的角度前端也可以POST多部分文件请求，然后从中获取GET。注意，没有控制器代码。 Spring Content REST目前不支持多个多部分文件，因此您必须多次修改test.js以调用$ hhtp.port，每个产品图像一个。也很高兴与您一起将此功能添加到Spring Content中。

Answer 2

为了使用angularjs和spring上传文件和数据，这里是代码`

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 {

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

2 个答案: