SpringBoot结合angularjs表单上传文件

最新推荐文章于 2021-11-11 17:29:46 发布

原创最新推荐文章于 2021-11-11 17:29:46 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

博客包含前端AngularJS代码和后端Java的Spring Boot代码，其中Spring Boot自带文件上传功能可直接使用，聚焦于前后端开发相关信息技术内容。

前端代码：

<form id="form_upload">
        <input id="upload_img_id" type="file" name="fileName"/>
        <button ng-click="uploadFile()" type="button">
        上传
        </button>
</form>

angularjs代码

this.uploadFile = function(){
        //重点1：form_upload是form表单的id
        var formData = new FormData(document.getElementById("form_upload"));
        //重点2：upload_img_id是文件input的id
        var file = document.getElementById("upload_img_id").files[0];
        //重点3：向formData中添加数据:
        formData.append("file",file);

        //下面是angularjs的代码，可以换成其他前端代码实现，重点是formData上传
        return $http({
            method:'post',
            url:'/seller/fileload/uploadFile.do',
            data:formData,
            headers:{'Content-Type':undefined} ,// Content-Type : text/html  text/plain
            transformRequest:angular.identity
            //浏览器会帮我们把Content-Type 设置为 multipart/form-data.
        });
    }

端java代码（SpringBoot的），SpringBoot自带文件上传，可以直接用

//重点4：@RequestParam("fileName")这个跟前端的input标签的name一致
@RequestMapping(value = "uploadFile.do", method = RequestMethod.POST)
    @ResponseBody
    public String fileUpload(@RequestParam("fileName") MultipartFile file){
        System.out.println(file.getOriginalFilename()+">>>>>>>>>");
        if(file.isEmpty()){
            return "false";
        }
        String fileName = file.getOriginalFilename();//z.png
        int size = (int) file.getSize();
        //fileName=fileName.substring(fileName.lastIndexOf("\\")+1);

        String path = System.getProperty("user.dir");//   /Users/apple/Desktop/IDEAWORKSPACE/day2/shoppingmall2
        File dest = new File(path+"/target/classes/static/img" + "/" + fileName);
        if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
            dest.getParentFile().mkdir();
        }
        try {
            file.transferTo(dest); //保存文件
            return "{\"img_path\":\"http://localhost:8080/img/"+fileName+"\"}";
        } catch (IllegalStateException e) {
            e.printStackTrace();
            return "false";
        } catch (IOException e) {
            e.printStackTrace();
            return "false";
        }
    }