如何用AngularJS实现Excel文件上传至Spring Boot后端接口

别担心，我来帮你搞定AngularJS端的Excel文件上传功能，你的Spring Boot后端接口已经就绪，咱们直接一步步实现前端部分就好！

先把你提供的后端代码整理一下方便参考：

@RestController
public class UploadController {
    @Autowired 
    PosteDao posteDao ; 

    //Save the uploaded file to this folder
    private static String UPLOADED_FOLDER = "C://Temp//"; 

    @PostMapping("/doUploadFile")
    // 这里你提到的后续逻辑应该是处理文件上传、暂存临时文件并存入数据库的代码
    // （假设你的接口已经正确处理multipart/form-data类型的请求）
}

接下来是AngularJS的前端实现步骤：

1. HTML模板部分 #

先写页面上的文件上传控件，指定只接受Excel文件，同时绑定AngularJS的处理事件：

<div ng-app="uploadApp" ng-controller="UploadController">
    <!-- 文件选择框，限制仅能选择Excel文件 -->
    <input type="file" id="excelFile" accept=".xlsx,.xls" ng-change="handleFileSelect($event)">
    
    <!-- 上传按钮，未选择文件时置灰不可用 -->
    <button ng-click="uploadFile()" ng-disabled="!selectedFile">上传Excel文件</button>
    
    <!-- 实时显示上传状态 -->
    <p>{{uploadStatus}}</p>
</div>

2. AngularJS控制器核心逻辑 #

接下来写AngularJS的核心处理代码，用FormData封装文件，通过$http发送请求对接你的后端接口：

// 定义AngularJS应用
var app = angular.module('uploadApp', []);

// 定义上传控制器
app.controller('UploadController', function($scope, $http) {
    $scope.selectedFile = null;
    $scope.uploadStatus = "";

    // 处理文件选择事件，获取选中的Excel文件
    $scope.handleFileSelect = function(event) {
        $scope.selectedFile = event.target.files[0];
        $scope.uploadStatus = "已选择文件：" + $scope.selectedFile.name;
    };

    // 执行文件上传操作
    $scope.uploadFile = function() {
        if (!$scope.selectedFile) {
            $scope.uploadStatus = "请先选择要上传的Excel文件";
            return;
        }

        // 创建FormData对象封装文件，这是前端上传文件的标准方式
        var formData = new FormData();
        formData.append("file", $scope.selectedFile);

        // 发送POST请求到后端接口
        $http.post('/doUploadFile', formData, {
            headers: {
                // 关键：不要手动设置Content-Type，让浏览器自动处理multipart/form-data的边界标识
                'Content-Type': undefined
            },
            // 告诉AngularJS不要序列化FormData，保持原始格式
            transformRequest: angular.identity
        }).then(function(response) {
            $scope.uploadStatus = "文件上传成功！";
            // 这里可以添加上传成功后的后续逻辑，比如刷新数据、提示用户等
            console.log("上传响应：", response);
        }, function(error) {
            $scope.uploadStatus = "文件上传失败：" + error.statusText;
            console.error("上传错误：", error);
        });
    };
});

关键注意事项 #

• Content-Type设置：一定要把Content-Type设为undefined，这样浏览器会自动添加正确的multipart/form-data头部和边界标识，否则后端可能无法解析上传的文件。
• 文件类型限制：accept=".xlsx,.xls"能确保用户只能选择Excel文件，避免无效文件的上传。
• FormData的使用：必须用FormData来封装文件，这是前端实现文件上传的标准方案，能正确兼容后端的multipart请求解析。

这样你的AngularJS前端就可以和Spring Boot后端接口顺利对接，实现Excel文件上传功能啦！

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