AngularJS上传文件

• 前台是Angular@L_616_1@
• 后台使用SpringBoot/SpirngMVC

上传文件

• html

<div>
    <input id="fileUpload" type="file" />
    <button ng-click="uploadFile()">上传</button>
</div>

• js

$scope.upload = function(){
            var form = new FormData();
            var file = document.getElementById("fileUpload").files[0];
            fd.append('file',filE);
            $http({
                method: 'POST',url: '/upload',data: form,headers: {'Content-Type': undefineD},transformrequest: angular.identity
            }).success(function (data) {
                console.log('upload success');
            }).error(function (data) {
                 console.log('upload fail');
            })
        }

• 后台

@requestMapping("/upload")
    public void uploadFile(@requestParam(value = "file",required = true) multipartfile filE) {
        //deal with file
    }

• 这样就完成了上传文件

上传文件的同时传递其他参数

• html

<div>
        <input id="fileUpload" type="file" />
        <button ng-click="ok()">上传</button><br>
        <input ng-model="user.username" />
        <input ng-model="user.password" />
    </div>

• js

$scope.ok = function () {
        var form = new FormData();
        var file = document.getElementById("fileUpload").files[0];   
        var user =JSON.Stringify($scope.user);

        form.append('file',filE);
        form.append('user',user);

        $http({
            method: 'POST',url: '/addUser',transformrequest: angular.identity
        }).success(function (data) {
            console.log('operation success');
        }).error(function (data) {
            console.log('operation fail');
        })
    };

• 后台

@requestMapping("/upload")
    public Map<String,Object> upload(@requestParam(value = "file") multipartfile file,@requestParam(value = "user",required = true) String user) {

        try (FileInputStream in = (FileInputStream) headImg.geTinputStream();
             FiLeoutputStream out = new FiLeoutputStream("filePathAndName")) {

            //将Json对象解析为UserModel对象
            ObjectMapper objectMapper = new ObjectMapper();
            UserModel userModel = objectMapper.readValue(user,UserModel.class);

            //保存文件到filePathAndName
            int hasRead = 0;
            byte[] bytes = new byte[1024];
            while ((hasRead = in.read(bytes)) > 0) {
                out.write(bytes,0,hasRead);
            }
        } catch (IOException E) {
            e.printStackTrace();
        }
    }