以spring mvc 3.0作为后端的Angularjs文件上载不工作-获取404错误_Angularjs_Spring Mvc_Spring 3

以spring mvc 3.0作为后端的Angularjs文件上载不工作-获取404错误

angularjs spring-mvc

以spring mvc 3.0作为后端的Angularjs文件上载不工作-获取404错误,angularjs,spring-mvc,spring-3,Angularjs,Spring Mvc,Spring 3,我是Spring MVC和Angularjs的新手，我正在尝试使用Angularjs和Spring MVC进行文件上传这里是我的html文件：当我启动tomcat服务器并尝试运行应用程序时，出现404错误，资源不可用。下面是我使用的url： FileUpload.html 下面是我的Spring控制器代码： UploadController.java Spring-context.xml完整代码： /页数/ .html 下面是我的web.xml完整代码：测试调度员 org.

我是Spring MVC和Angularjs的新手，我正在尝试使用Angularjs和Spring MVC进行文件上传这里是我的html文件：

当我启动tomcat服务器并尝试运行应用程序时，出现404错误，资源不可用。下面是我使用的url：

FileUpload.html

下面是我的Spring控制器代码：

UploadController.java

Spring-context.xml完整代码：


/页数/
.html

下面是我的web.xml完整代码：


测试
调度员
org.springframework.web.servlet.DispatcherServlet
上下文配置位置
/WEB-INF/spring-context.xml
1.
调度员
/登录/*

js文件放在WEB-INF/scripts下，源html页面（FileUpload.html）放在WebContent/pages下

spring-context.xml和web.xml位于web-INF文件夹下。controller类位于com.net.controller下

现在什么时候我知道我做了一些配置和映射错误。我无法得到那个

谁能指出地图上的错误吗。非常感谢你的帮助

提前感谢

您的api地址无效，就像您在/upload上提交上载文件一样，即如果您的站点运行在

localhost:8080

上，并且上载url为

localhost:8080/upload

。但是您已经在控制器和

@RequestMapping（value=“/upload”）上创建了后端url为@RequestMapping（“api/userfile/”）
，method=RequestMethod.POST）

on方法，这意味着您的后端url是

api/用户文件/上传

这就是你得到404的原因。你可以将你的角度url从/upload更改为/api/userfile/upload。这对你来说很有用。

Charnjeet:谢谢你的回复，但我将angularurl更改为/api/userfile/upload，我点击的应用程序url如下：localhost:9090/Test/api/userfile/fileUploadForm，我仍然得到404错误。这是由于web.xml中的一些映射错误造成的吗？另外，当我点击localhost:9090/Test/api/userfile/upload这样的应用程序url时，它会说加载资源失败：服务器响应状态为405（不允许使用方法）error您是在GRUNT还是在服务器（Tomcat）上运行项目？我正在Tomcathttp 404中运行项目错误现已解决，当我点击url时，页面将显示：。当我单击表单中的上载按钮时，文件已成功上载到上述位置。但是，在spring的upload方法中，我返回一个类似“file is successfully upload”的字符串，该字符串不会显示在页面中。有什么想法吗？

<!DOCTYPE html>
<html>
<head>

<meta charset="ISO-8859-1">
<title>UserConfig FileUpload</title>

<script type="text/javascript">
    // load angularjs specific version
    var angularVersion = window.location.hash.substring(1);
    if (angularVersion.indexOf('/') == 0) angularVersion =  
    angularVersion.substring(1);
    document.write('<script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/' +
        (angularVersion || '1.2.24') + '/angular.js"><\/script>');
 </script>

<script  type="text/javascript" src="siteConfig.js"></script>

</head>

<body>
<div ng-app="myApp" ng-controller = "SiteFileUploadCtrl">
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">Upload</button>
</div>
</body>
</html>

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            withCredentials : false,
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log("success 1");
        })
        .error(function(){
            console.log("error");
        });
    }
}]);

myApp.controller('SiteFileUploadCtrl', ['$scope', 'fileUpload',  
 function($scope, fileUpload){

    $scope.uploadFile = function(){
        alert("hi");
        console.log("hello");
        var file = $scope.myFile;
        console.log('file is');
        console.dir(file);
        var uploadUrl = '/Test/login/api/userfile/upload';
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

}]);

package com.net.controller;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;


@Controller
@RequestMapping("/api/userfile/")
public class UploadController {


    @RequestMapping(value = "/fileUploadForm")
    public ModelAndView getUploadForm() {

        return new ModelAndView("FileUpload");
    }

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public @ResponseBody String upload(
            @RequestParam("file") MultipartFile file ) throws IOException {
        String fileName = null;
        if (!file.isEmpty()) {
            try {
                fileName = file.getOriginalFilename();
                byte[] bytes = file.getBytes();
                File newFile = new File("C:\\test\\" + fileName);
                BufferedOutputStream buffStream = 
                        new BufferedOutputStream(new FileOutputStream(newFile));
                buffStream.write(bytes);
                buffStream.close();
                return "You have successfully uploaded " + fileName;
            } catch (Exception e) {
                return "You failed to upload " + fileName + ": " + e.getMessage();
            }
        } else {
            return "Unable to upload. File is empty.";
        }
    }
}

<?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:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <mvc:annotation-driven />

    <context:component-scan  base-package="com.net.controller" />

    <mvc:resources mapping="/scripts/**" location="/scripts/" />

    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/pages/</value>
        </property>
        <property name="suffix">
            <value>.html</value>
        </property>
    </bean>

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

</beans>

<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

 <display-name>test</display-name>

 <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>
        org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring-context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/login/*</url-pattern>
 </servlet-mapping>

</web-app>