AngularJS上传文件

短命女 2022-07-10 11:56 109阅读 0赞

> 使用`AngularJS`上传文件

*  前台是`Angular`页面
 *  后台使用`SpringBoot/SpirngMVC`

--------------------

## 上传文件 ##

*  html

*  js

$scope.upload = function(){ 
                var form = new FormData();
                var file = document.getElementById("fileUpload").files[0];
                form.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');
                })
            }

> 注意：
> 
>  *  AngularJS默认的`'Content-Type'`是`application/json` ，通过设置`'Content-Type': undefined`，这样浏览器不仅帮我们把`Content-Type` 设置为 `multipart/form-data`，还填充上当前的`boundary`，
>  *  如果手动设置为：`'Content-Type': multipart/form-data`，后台会抛出异常：`the request was rejected because no multipart boundary was found`
>  *  `boundary` 是随机生成的字符串，用来分隔文本的开始和结束
>  *  通过设置 `transformRequest: angular.identity` ，`anjularjs transformRequest function` 将序列化我们的`formdata object`，也可以不添加

*  后台

@RequestMapping("/upload")
        public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {
            //deal with file
        }

> 注意
> 
>  *  文件必须通过@RequestParam注解来获取，且需指定value才能获取到

*  这样就完成了上传文件

--------------------

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

*  html

*  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',
                data: form,
                headers: {
       'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function (data) { 
                console.log('operation success');
            }).error(function (data) { 
                console.log('operation fail');
            })
        };

>  *  注意  
>     
>     
>      *  需要将Object转为String后在附加到form上，否则会直接被转为字符串\[Object,object\]

*  后台

@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();
            }
        }

> 注意
> 
>  *  `ObjectMapper`为`com.fasterxml.jackson.databind.ObjectMapper`