用Angular JS和Spring上传多张图片

Question

我想上传多个图像。为此，我正在使用angular js和spring mvc。在这里我能够获取angular js中的所有文件，但是当我单击Upload时，它没有显示错误并且它不在spring控制器内太。 我只是想在system.out.print语句中在那里打印文本。请帮帮我。

谢谢。

这是我的html：-

 <div class="button" ngf-select ng-model="files" ngf-multiple="multiple">Select File</div>

    Drop File:
    <div ngf-drop ngf-select ng-model="files" class="drop-box"
        ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"
        accept="image/*,application/pdf">Drop pdfs or images here or click to upload</div>
    <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
    Files:

    <ul>
        <li ng-repeat="f in filesDetails" style="font:smaller">{{f.name}}</li>
    </ul>

</div>
</div>

<div>
         <button class="" ng-click="uploadImage()">Upload Image</button>
</div>

这是我的controller.js：-

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$http', function($scope, Upload, $http) {
    $scope.filesDetails = [];
    $scope.$watch('files', function() {

        $scope.upload($scope.files);
    });


    $scope.upload = function(files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {

                if (files[i].type == 'image/jpeg' || files[i].type == 'image/png') {
                    $scope.filesDetails.push(files[i]);
                } else {
                    alert("This kind of file is not Valid");

                }
            }
        }
    };

    $scope.uploadImage = function() {



        alert("uploading");
        var formData = {
            file: $scope.filesDetails
        };
        console.log(formData.file);

        var imagePost = $http.post(
            'http://localhost:8080/orion-orbit/newclue/doUpload',
            formData,
            {
                transformRequest: 
                    function(data, headersGetterFunction) {
                    return data;
                },
                headers: { 'Content-Type': 'multipart/form-data' }
            });


        imagePost.success(function(data, status,
            headers, config) {
            alert("sucess" + status);

        });
        imagePost.error(function(data, status,
            headers, config) {
            alert("Error" + status);
            alert("Exception details: " + JSON.stringify({
                data: data
            }));

        });
    }
}]);

这是我的弹簧控制器：-@Controller

@RequestMapping("/newclue")
public class ClueController {

@RequestMapping(value="/doUpload" , method = RequestMethod.POST , consumes = "multipart/form-data")

    public void handleFileUpload(@RequestParam("file") MultipartFile file) 
    {
    System.out.println("inside controller of image Upload");

    }

}

这是我的web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>Sample Spring Maven Project</display-name>
  <servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/spring-config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>mvc-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <error-page>
        <error-code>404</error-code>
        <location>/error-pages/404-error.jsp</location>
    </error-page>
    <error-page>
        <error-code>500</error-code>
        <location>/error-pages/500-error.jsp</location>
    </error-page>
</web-app>

这是我的spring-config-file：-

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:util="http://www.springframework.org/schema/util" xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd
  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">

    <context:component-scan base-package="com.orion.orbit.controller" />
    <mvc:annotation-driven />

    <bean id="dataSource"
        class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost:3306/o2_db" />
        <property name="username" value="root" />
        <property name="password" value="root" />
    </bean>

    <bean id="sessionFactory"
        class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <property name="annotatedClasses">
            <list>
                <value>com.orion.orbit.model.CountryCode</value>
                <value>com.orion.orbit.model.CityCode</value>
                <value>com.orion.orbit.model.ClueData</value>               
                <value>com.orion.orbit.model.ClueAns</value>
                <value>com.orion.orbit.model.AnsClueMap</value>
                <value>com.orion.orbit.model.ClueTag</value>
                <value>com.orion.orbit.model.ClueTagMap</value>
                <value>com.orion.orbit.model.NewClueRequestVO</value>
                <value>com.orion.orbit.model.UploadFile</value>
            </list>
        </property>
        <property name="hibernateProperties">
            <props>
                <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop>
                <prop key="hibernate.show_sql">true</prop>
            </props>
        </property>
    </bean>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <bean id="simpleMappingExceptionResolver" class="com.orion.orbit.resolver.MySimpleMappingExceptionResolver">
        <property name="exceptionMappings">
            <map>
                <entry key="Exception" value="error"></entry>
            </map>
        </property>
        <property name="defaultErrorView" value="error" />
    </bean>

    <bean id="txManager"
        class="org.springframework.orm.hibernate4.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory" />
    </bean>

    <bean id="persistenceExceptionTranslationPostProcessor"
        class="org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor" />

    <bean id="clueDao" class="com.orion.orbit.dao.ClueDaoImpl"></bean>
    <bean id="clueServices" class="com.orion.orbit.services.ClueServicesImpl"></bean>
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

        <!-- one of the properties available; the maximum file size in bytes -->
        <property name="maxUploadSize" value="10000000" />
    </bean>
    <mvc:resources mapping="/resources/**" location="/resources/" />

</beans>

Answer 1

有很多要检查的地方

1. 在您的URL中，您的根上下文看起来像是Orion-orbit，“ http：// localhost：8080 / orion-orbit / newclue / doUpload ”，因此您必须将requestMapping映射到@RequestMapping（value =“ / newclue / doUpload”

2. 它还取决于您如何映射URL，是否已正确配置请求分派器以及是否具有任何URL重定向，请检查web.xml。

3. 而且，您应该在applicationContext.xml中定义了Spring分段解析器bean，以解析分段上传。

例：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />