基于SpringBoot vue 文件上传功能实现

1、实现vue的文件上传必须给对应的文件绑定vue的ref

<td valign="middle" align="right" >
   photo:
</td>
<td valign="middle" align="left">
   <input type="file" ref="myPhoto" name="photo">
</td>

在提交异步请求的按钮上绑定事件 @click=“saveEmp”

<p>
   <input type="button" @click="saveEmp" class="button" value="Confirm" />
</p>

拿到vue绑定的标签对象

console.log(this.emp);  //用户输入的信息
console.log(this.$refs.myPhoto.files[0]);

files[0] 数组的中的第一个元素，日后可能有很多myPhoto同名的文件

文件上传时请求方式必须是post，enctype必须为multipart/form-data

axios({
    
    
   method: "post",
   url: "http://localhost:8989/ems_vue/emp/save",  
   data: formData,  //表单信息   这里应该把emp跟文件信息传给data，需要构建一个formData表单数据
   headers: {
    
    
      'content-type': 'multipart/form-data'
   }
}).then(response => {

构建一个formdata存入用户输入的emp跟文件信息

因为文件上传需要用到ref，无法v-model将文件绑定进emp对象中

//模拟一个表单
var formData = new FormData();
formData.append("name",this.emp.name);
formData.append("salary",this.emp.salary);
formData.append("age",this.emp.age);
formData.append("photo",this.$refs.myPhoto.files[0]);

2、controller响应前端传回路径

注意：从addEmp.html页面使用axios中data 传进来的参数名需要一一对应，否则会传参失败

使用log.info 打印日志需要添加@Slf4j注解

/**
 * 保存员工信息
 */
@PostMapping("save")
//这里的MultipartFile photo 参数名是和前端addEmp.html页面中formdata传进来的参数photo一致
public Map<String,Object> save(Emp emp, MultipartFile photo) throws IOException {
    
      //这里的photo需要和前端formdata传入的数据一致
    log.info("员工信息：[{}]",emp.toString());
    log.info("头像信息：[{}]",photo.getOriginalFilename());

application.properties

注意：这里的文件路径\反斜杠需要转义

//声明一个文件上传的目录
photo.dir = D:\\javaweb_workspace\\ems_vue\\src\\main\\resources\\static\\photos

在static下创建一个photos文件

扫描二维码关注公众号，回复： 13291018 查看本文章

在controller中把刚刚在application.properties中配置的文件注入进来

//注入路径
@Value("${photo.dir}")
private String realPath;

将保存的头像上传到服务器指定的目录

注意：上传头像的时候很多用户会从网上百度头像，可能会出现头像名字一致的问题，这里我们需要用到UUID改变每一个头像的名字

try {
    
    
    //头像的保存，上传到服务器的指定目录
    //上传头像时有很多用户在网上百度图像的文件名字可能会出现名字
    //这里需要修改文件名
    String newFileName = UUID.randomUUID().toString()+"."+ FilenameUtils.getExtension(photo.getOriginalFilename());
    //指定路径进行文件上传
    photo.transferTo(new File(realPath,newFileName));
    //设置头像地址
    emp.setPath(newFileName);//newFileName这是一个项目名
    //保存员工信息
    empService.save(emp);
    map.put("state",true);
    map.put("msg","员工信息保存成功！");
} catch (IOException e) {
    
    
    e.printStackTrace();
    map.put("state",false);
    map.put("msg","员工信息保存失败！");
}

使用UUID后的效果
在这里插入图片描述

3、前端展示图片

在SpringBoot配置文件中配置静态资源放行

#springboot 静态资源放行  photos的文件以web的形式输入
spring.resources.static-locations=classpath:/static/,file:${
    
    photo.dir}

<img :src="'/ems_vue/'+emp.path" style="height: 40px" alt="">