前后端分离传输文件

前端:注意input标签上使用ref='photo'

   //新建formdata对象把数据丢进去
                let formData = new FormData();
                formData.append("name",this.staff.name);
                formData.append("salary",this.staff.salary);
                formData.append("age",this.staff.age);
                formData.append("photo",this.$refs.photo.files[0]);
                //文件上传时 请求方式必须得post enctype必须为multipart/form-data
                axios({
                    method: "post",
                    url: "http://localhost:8080/staff/addstaff",
                    data: formData,
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                }).then(res => {
                    console.log(res.data);
                    if(res.data.state==true){
                        //window.confirm代表是否确认跟alert类似,确认进人if语句
                        if(window.confirm(res.data.msg+"点击确认回到主页")){
                            location.href="emplist.html";
                        }else {
                            this.staff={};
                        }
                    }else {
                        alert(res.data.msg);
                    }
                })

后端: 

 //从application.properties文件取出文件路径
    @Value("${photo.dir}")
    private String photoPath;

 @PostMapping("addstaff")
    public Map<String,Object> addStaff(Staff staff, MultipartFile photo) throws IOException {
        System.out.println(staff.toString());
        System.out.println(photo.getOriginalFilename());
        Map<String,Object> map = new HashMap<>();

        //头像保存
        //随机名+FilenameUtils.getExtension(photo.getOriginalFilename());获得文件的扩展名
        String newFileName = UUID.randomUUID().toString()+"."+ FilenameUtils.getExtension(photo.getOriginalFilename());
        //文件上传
        photo.transferTo(new File(photoPath,newFileName));
        //设置头像地址
        staff.setPath(newFileName);
        //保存信息
        try {
            staffService.save(staff);
            map.put("state",true);
            map.put("msg","员工信息保存成功");
        } catch (Exception e) {
            e.printStackTrace();
            map.put("state",false);
            map.put("msg","员工信息保存失败");
        }
        return map;
    }

properties文件:

#设置文件存放位置
photo.dir=E:\\IDEA\\ems_vue\\src\\main\\resources\\static\\photos
#设置文件大小
spring.http.multipart.maxFileSize = 10Mb  //单个数据大小
spring.http.multipart.maxRequestSize=100Mb //是总数据大小
#设置static下面的文件可以直接以web的形式访问
spring.resources.static-locations=classpath:/static/,file:${photo.dir}