在angularjs和spring rest服务中上传带有其他表单字段的图像

【问题标题】：uploading image with other form fields in angularjs and spring rest service在angularjs和spring rest服务中上传带有其他表单字段的图像
【发布时间】：2017-07-10 12:18:14
【问题描述】：

我有一个 html。我需要在 angularjs 和 spring rest 服务中上传带有其他表单字段的图像。 下面是html。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
        <script type="text/javascript" src="resources/js/app.js"></script>
        <link href="resources/css/cards.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

        <div ng-app="homeApp" ng-controller="homeController">
            <div>
                <div id="headerBarMenuText" href="#" ng-click="displayWeddingCards('weddingcards');">Wedding Cards</div>
                <div id="headerBarMenuText" href="#" ng-click="displayTab2('tab2');">Tab2</div>
                <div id="headerBarMenuText" href="#" ng-click="displayTab3('tab3');">Tab3</div>
                <div id="headerBarMenuText" href="#" ng-click="displayReturnGifts('returngifts');">Return Gifts</div>
                <div id="headerBarMenuText" href="#" ng-click="displayAdmin('admin');">Admin</div>
            </div>

            <div ng-show="showHome">
                Welcome. Please select the tabs for more details.
            </div>

            <div ng-show="admin">
                Admin
                <form>
                    <div>Name:</div>
                    <div>
                        <input type="text" ng-model="name" name="name" />
                    </div>
                    <div>Description:</div>
                    <div>
                        <input type="text" ng-model="description" name="description" />
                    </div>
                    <div>Category:</div>
                    <div>
                        <select ng-model="category" name="category">
                            <option value="0">None Selected</option>
                            <option value="1">Wedding Cards</option>
                            <option value="2">Tab 2</option>
                            <option value="3">Tab 3</option>
                            <option value="4">Return Gifts</option>
                        </select>
                    </div>
                    <div>Price:</div>
                    <div>
                        <input type="text" ng-model="price" name="price" />
                    </div>
                    <div>
                        <input type="file" file-model="multipartFile" name="multipartFile"></input>
                    </div>
                    <div>
                        <input type="button" value="Save" ng-click="uploadImage();" />
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

下面是spring控制器的方法。

@POST
@Path("/uploadImage")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public void uploadImage(){

}

在上面的代码中，我想上传文件和数据字段。我正在使用 angular js 和 spring rest 服务。如何在 js 中发送文件和数据以及如何获取 spring 控制器中的值。我的意思是我应该在 uploadImage() 方法中使用哪些参数来获取控制器中的表单数据字段和文件。

添加控制器类。 和控制器类。

@Controller
@Path("/cards")
public class AppController {

    @Autowired
    private AppService service;

    @RequestMapping(method = RequestMethod.POST, value = "uploadImage")
    public void uploadImage(@RequestParam("name") String name , 
    @RequestParam("file") MultipartFile file){
        System.out.println("Name: "+name);
        System.out.println("File Name: "+file.getOriginalFilename());
    }
}

还添加了js方法。

$scope.uploadImage = function(){
    var fd = new FormData();
    fd.append('name', $scope.name);
    fd.append('description', $scope.description);
    fd.append('file', $scope.multipartFile);
    fd.append('price', $scope.price);
    $http.post('../oviyacards/service/cards/uploadImage',fd)
    .success(function(data) {
        alert("Success");
    }).error( function(data) {
        alert("Failure");
    });
}

还有 web.xml。

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Oviya Cards</display-name>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/Beans.xml</param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <servlet>
        <servlet-name>cards-serlvet</servlet-name>
        <servlet-class>com.sun.jersey.spi.spring.container.servlet.SpringServlet</servlet-class>
        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>com.oviya.cards.controller</param-value>
        </init-param>
        <init-param>
            <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
            <param-value>true</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>cards-serlvet</servlet-name>
        <url-pattern>/service/</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>/WEB-INF/views/home.html</welcome-file>
    </welcome-file-list>

</web-app>

请帮帮我。提前致谢。

添加 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.oviya</groupId>
  <artifactId>oviyacards</artifactId>
  <version>1</version>
  <packaging>war</packaging>

  <name>oviyacards</name>
  <url>http://maven.apache.org</url>

  <properties>
    <spring.version>3.2.5.RELEASE</spring.version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
    <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-client -->
    <dependency>
        <groupId>com.sun.jersey</groupId>
        <artifactId>jersey-client</artifactId>
        <version>1.19.1</version>
    </dependency>
    <!-- Spring 3 dependencies -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-dao</artifactId>
            <version>2.0.8</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.5</version>
        </dependency>

        <!-- Jersey + Spring -->
        <dependency>
            <groupId>com.sun.jersey.contribs</groupId>
            <artifactId>jersey-spring</artifactId>
            <version>1.8</version>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-core</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-web</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-beans</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-server</artifactId>
            <version>1.8</version>
        </dependency>
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-json</artifactId>
            <version>1.8</version>
        </dependency>
        <dependency>
            <groupId>javax.ws.rs</groupId>
            <artifactId>jsr311-api</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20131018</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-bundle -->
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-bundle</artifactId>
            <version>1.8-ea03</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.sun.jersey.contribs/jersey-multipart -->
        <dependency>
            <groupId>com.sun.jersey.contribs</groupId>
            <artifactId>jersey-multipart</artifactId>
            <version>1.19</version>
        </dependency>

  </dependencies>
  <build>
    <finalName>oviyacards</finalName>
  </build>
</project>

【问题讨论】：

标签： javascript java angularjs spring rest


【解决方案1】：

在你的 AngularJS 控制器中，你可以使用这样的东西

function uploadImage(){
    var formData = new FormData();
    fd.append('file', multipartFile);
    fd.append('name', name);
    fd.append('description', description);
    fd.append('category', category);
    fd.append('price', price);
    $http.post("yourdomain.com/uploadImage", formData);
}

请查看AngularJS documentation$http：

您的 REST 控制器可能与此类似

@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("file") MultipartFile file,
    @RequestParam("name") String name, @RequestParam("description") String description, 
    @RequestParam("category") String category, @RequestParam("price") Double price){
    //process your image: file)
}

【讨论】：

  • 为什么要将 JAX-RS Jersey 注释与 Spring 注释混合使用？
  • 感谢您的回答。这里我也想要表单数据。如何在 spring 控制器中获取表单数据。能否请您给我完整的 $http.post 方法？
  • @RossiRobinsion：改了
  • @Rumo。谢谢。这里我也想在spring控制器中获取表单数据。如何获取表单数据？
  • @Gopinath：我相应地更改了代码。您可以使用 DTO 获取其他数据。
猜你喜欢
  • 2017-08-21
  • 1970-01-01
  • 1970-01-01
  • 2013-09-27
  • 2016-01-27
  • 2015-04-13
  • 2015-06-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode