如何使用AngularJS,Spring-Boot实现文件上载?

时间:2017-06-06 09:29:02

标签: angularjs spring-boot file-upload

要上传文件, Angular JS部分: 我在我的控制器中使用它:

function checkform() {
    var ok = true;
    var character = [["first_name","surname","address"],["/^[A-Za-z]+$/"]];
    var city = [["city"],["/^[A-Za-z][0-9]+$/"]];
    var post = [["post_code"],["/^[0-9]+$/"]];
    var email = [["email"],["/\S+@\S+/"]];
    $("form[name='user_details'] input").each(function(){
        if($.inArray(this.id,character[0]) >= 0 ) {
            ok = showError(this,character[1]);      
        } else if(this.id == city[0]) {
            ok = showError(this,city[1]);
        } else if(this.id == post[0]) {
            ok = showError(this,post[1]);
        } else if(this.id == email[0]) {
            ok = showError(this,email[1]);
        }
    });
    return ok;
}
function showError(t,p) {
    if(t.value == "" || !p.test(t.value)){
        $(t).css("borderColor","red");
        $("#error_"+t.id).show();
        return false;
    }
    return true;
}

});

在html中: var uploader = $scope.uploader = new FileUploader({ url: '/imageUpload' Spring-Boot部分(在服务方法中):


<input type="file" nv-file-select="" uploader="uploader" accept="image/png, image/jpeg, image/gif" name="input-file-preview" ng-disabled="em.checked"/>

但我收到403禁止错误,因为它无法找到/ imageUpload资源。当我们使用spring boot时,任何人都可以解释一下这个fileUploader是如何工作的,因为这个代码在上传php文件时工作正常。

提前致谢

1 个答案:

答案 0 :(得分:0)

服务器端实现看起来不错。从角度服务尝试使用带有POST请求的formData,它应该可以工作。

function saveDoc(file) {
                var deferred = $q.defer();
                var formData = new FormData();
                formData.append('file', file);

                $http.post(urls.DOC_URL+'upload', formData,{
                    transformRequest : angular.identity,
                    headers : {
                        'Content-Type' : undefined
                    }})
                    .then(
                        function (response) {
                            deferred.resolve(response.data);
                        },
                        function (errResponse) {
                            alert(errResponse.data.errorMessage);
                            deferred.reject(errResponse);
                        }
                    );
                return deferred.promise;
            };

参考: Spring Boot Angular JS file Upload