从AngularJS向Spring REST API发送Excel文件：求控制器与服务实现

嘿，我来帮你搞定前端这部分的文件上传逻辑！既然你的Spring Boot REST API已经准备好了，那我们只需要把AngularJS这边的UI交互和后端调用补上就行。

首先你HTML里用到的file-model不是AngularJS内置指令，得先自定义一个来让框架能获取到文件对象：

1. 自定义fileModel指令 #

这个指令会监听文件选择框的变化，把选中的文件对象绑定到你指定的变量上：

angular.module('yourAppName')
.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]);
                });
            });
        }
    };
}]);

2. 文件上传服务（Service） #

接下来创建一个专门的服务来处理和后端的交互，用FormData包装文件是上传文件的标准做法：

angular.module('yourAppName')
.service('fileUploadService', ['$http', function($http) {
    this.uploadFileToServer = function(file, uploadUrl){
        var fd = new FormData();
        // 这里的'file'必须和你Spring Boot接口里@RequestParam的参数名完全一致！
        fd.append('file', file);
        
        return $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .then(function(response) {
            return response.data;
        })
        .catch(function(error) {
            console.error('上传失败:', error);
            throw error;
        });
    };
}]);

3. 控制器（Controller） #

把指令和服务结合起来，在控制器里处理文件选择后的上传逻辑：

angular.module('yourAppName')
.controller('FileUploadController', ['$scope', 'fileUploadService', function($scope, fileUploadService) {
    
    $scope.uploadFile = function(){
        var selectedFile = $scope.myFile;
        // 替换成你实际的Spring Boot API接口路径
        var apiUrl = "/api/upload";
        
        if(selectedFile){
            fileUploadService.uploadFileToServer(selectedFile, apiUrl)
            .then(function(result) {
                alert('文件上传成功！');
                // 这里可以添加上传成功后的逻辑，比如刷新数据列表
            })
            .catch(function() {
                alert('文件上传失败，请重试！');
            });
        } else {
            alert('请先选择一个文件哦！');
        }
    };
}]);

4. 完善你的HTML #

给输入框加个上传按钮，绑定控制器里的上传方法：

<div ng-controller="FileUploadController">
    <input type="file" name="file" id="fileUpload" file-model="myFile" title="选择文件">
    <button ng-click="uploadFile()">上传文件</button>
</div>

关键注意点 #

• 确保你的Angular模块名称（yourAppName）在所有代码块里保持一致
• 后端API的请求路径和方法要和前端完全匹配（比如后端是POST请求，路径为/api/upload）
• 后端接收文件的参数名必须和fd.append('file', file)里的第一个参数一致

内容的提问来源于stack exchange，提问作者saifeddine