SpringBoot+Vue+Ant组件实现图片上传

• Vue页面
  具体参考官网网址：https://www.antdv.com/components/upload-cn/

• action中的 /crmapi 是我在vue的配置中对后台方法引入调用时的前缀限制

• 配置文件配置信息

#图片上传
spring.servlet.multipart.enabled=true
#单个数据的大小
spring.servlet.multipart.max-file-size=3MB
#总数据的大小
spring.servlet.multipart.max-request-size=3MB
#文件夹路径
pic_path=D:\pic

• 后台方法代码

@RestController
@RequestMapping("/upload")
public class CheckController {
	@Value("${pic_path}")
    private String pic_path;

 	
    @PostMapping("/uploadPic")
    public String uploadPic(@RequestParam MultipartFile file, HttpServletRequest request) throws Exception {
    	// 文件路径
        String path = "";
        // 判断上传的文件是否为空
        if (file != null) {
            String type = "";
            String fileName = file.getOriginalFilename();// 文件原名称
            
            // 获取文件类型
            type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
           
            // 文件类型不为空时
            if (type != null) {
                //过滤文件类型
                if ("PNG".equals(type.toUpperCase()) || "JPG".equals(type.toUpperCase())) {
                    // 自定义的文件名称
                    String newFileName = String.valueOf(System.currentTimeMillis()) + "." + type;

                    //判断所存放文件夹是否存在，不存在则创建
                    File dir = new File(pic_path);
                    if (!dir.exists()) {
                        dir.mkdirs();
                    }
                    
                    //图片存放路径
                    path = pic_path+"\"+fileName;
                    
                    // 转存文件到指定的路径
                    file.transferTo(new File(path));

                    return "图片上传成功";
                }
            } else {
                return "图片类型错误";
            }
        } else {
            return "图片不可为空";
        }
        return "图片上传失败";
    }
}