Vue+ElementUI+SpringBoot上传图片到static静态文件夹下并回显

使用ElementUI和SpringBoot，上传文件将变得十分轻松。

1、 ElementUI已经封装好了上传图片的组件。

首先根据ElementUI官网给出的demo，编写前端页面。直接copy啦☺

  <el-upload
     class="avatar-uploader"
     <!--后台请求的参数名，很重要，不写后台就拿不到数据了-->
     name="avatar"
     <!--后台处理请求的接口-->
     action="http://localhost:8081/user/avatar"
     :show-file-list="false"
     :on-success="handleAvatarSuccess">
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>

这里需要注意组件的几个属性：

• name=“avatar” ：后台请求的参数名，很重要，不写后台就拿不到数据了
• action=“http://localhost:8081/user/avatar”：后台处理请求的接口
• :on-success=“handleAvatarSuccess”：上传成功的回调函数，一般用来修改图片的地址，以回显图片
• :src=“imageUrl”：图片的动态地址

然后再编写一下回调函数，这里就只写成功回调函数，也是copy官网啦😂。

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res)
      console.log(file)
    }

2、SpringBoot已经自动配置好文件上传相关。

前端写完，就编写SpringBoot的后台接口了。

Java中的文件上传一共涉及两个组件，一个是CommonsMultipartResolver，另一个是StandardServletMultipartResolver。其中CommonsMultipartResolver依赖commons-fileupload和commons-io两个包；StandardServletMultipartResolver则是基于Servlet3.0来处理的，Tomcat7.0开始就支持Servlet3.0了，因此，直接选择StandardServletMultipartResolver，而SpringBoot已经默认配置好它了。

那么直接编写Controller，

    @PostMapping("/user/avatar")
    public SysResult uploadAvatarHandler(@RequestParam("avatar") MultipartFile uploadFile ) throws IOException {
        //获得项目的类路径
        String path = ResourceUtils.getURL("classpath:").getPath();
        //空文件夹在编译时不会打包进入target中
        File uploadDir = new File(path+"/static/avatar/user");
        if (!uploadDir.exists()) {
            System.out.println("上传头像路径不存在，正在创建...");
            uploadDir.mkdir();
        }
        if ( uploadFile != null) {
			//获得上传文件的文件名
            String oldName = uploadFile.getOriginalFilename();
            System.out.println("[上传的文件名]：" + oldName);
			//我的文件保存在static目录下的avatar/user
            File avatar = new File(path + "/static/avatar/user/" , oldName);
            try {
            	//保存图片
                uploadFile.transferTo(avatar);
                //返回成功结果，附带文件的相对路径
                return SysResult.ok("上传成功","/avatar/user/"+oldName);
            }catch (IOException e) {
                e.printStackTrace();
                return SysResult.error("上传失败");
            }
        }else {
            System.out.println("上传的文件为空");
            return SysResult.error("文件传输错误");
        }

    }

SysResult是自己编写的一个返回结果类。

/*
* 系统返回结果 类
* status：状态码 200成功、500失败
* msg：消息提示
* obj：返回数据
* */
public class SysResult {
    private Integer status;
    private String msg;
    private Object obj;
    //省略get/set和ok/error方法
}

@RequestParam注解中的值对应的为前端el-upload组件中的name属性的值；
首先要获得SpringBoot项目的绝对路径，Spring提供了两个工具类ResourceUtils和ClassUtils。

//使用ResourceUtils
String path = ResourceUtils.getURL("classpath:").getPath();
//使用ClassUtils
String path1 = ClassUtils.getDefaultClassLoader().getResource("").getPath();

两者获得的路径都是一样的。都是： {项目地址}/target/classes。

然后就按照自己想要保存在什么路径创建File对象，再用transferTo方法保存就行了。

具体请看上面的代码。

参考文章：https://blog.csdn.net/f45056231p/article/details/88692444