美文网首页Springboot
SpringBoot实现上传图片功能

SpringBoot实现上传图片功能

作者: _灯火阑珊处 | 来源:发表于2018-07-12 14:55 被阅读19次
    1:首先在项目的pom文件中添加两个依赖
    <!-- 文件上传组件 -->
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <!-- 图片处理类 -->
    <dependency>
        <groupId>net.coobird</groupId>
        <artifactId>thumbnailator</artifactId>
        <version>0.4.8</version>
    </dependency>
    
    2:resource中添加 file-message.properties 配置文件
    file-message.properties.png

    配置文件内容如下

    #文件压缩大小(大于4兆压缩)
    message.fileSize=4194304
    #图片保存路径
    message.upPath=D:\\MyProjectName\\UploadData\\images
    #压缩比例
    message.scaleRatio=0.20f
    #图片类型
    message.imageType=png,jpg,jpeg
    
    3:新建 MessageProperties 类,对应 file-message.properties 配置文件
    @Component
    @ConfigurationProperties(prefix="message")
    @PropertySource("classpath:file-message.properties")
    public class MessageProperties {
    
        private long fileSize;  //压缩大小
    
        private double scaleRatio; //压缩比例
    
        private String upPath; //保存路径
    
        private String imageType; //图片类型
        
        public long getFileSize() {
            return fileSize;
        }
    
        public void setFileSize(long fileSize) {
            this.fileSize = fileSize;
        }
    
        public double getScaleRatio() {
            return scaleRatio;
        }
    
        public void setScaleRatio(double scaleRatio) {
            this.scaleRatio = scaleRatio;
        }
    
        public String getUpPath() {
            return upPath;
        }
    
        public void setUpPath(String upPath) {
            this.upPath = upPath;
        }
    
        public String getImageType() {
            return imageType;
        }
    
        public void setImageType(String imageType) {
            this.imageType = imageType;
        }
    
    }
    

    @PropertySource("classpath:file-message.properties")对应第二步配置文件的名称

    4:service层接口
    public interface FileUpAndDownService {
    
        Map<String, Object> uploadPicture(MultipartFile file) throws ServiceException;
    
    }
    
    5:service层接口实现
    @Service
    public class FileUpAndDownServiceImpl implements FileUpAndDownService {
    
        @Autowired
        private MessageProperties config; //用来获取file-message.properties配置文件中的信息
    
        @Override
        public Map<String, Object> uploadPicture(MultipartFile file) throws ServiceException {
            try {
                Map<String, Object> resMap = new HashMap<>();
                String[] IMAGE_TYPE = config.getImageType().split(",");
                String path = null;
                boolean flag = false;
                for (String type : IMAGE_TYPE) {
                    if (StringUtils.endsWithIgnoreCase(file.getOriginalFilename(), type)) {
                        flag = true;
                        break;
                    }
                }
                if (flag) {
                    resMap.put("result", IStatusMessage.SystemStatus.SUCCESS.getMessage());
                    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
                    // 获得文件类型
                    String fileType = file.getContentType();
                    // 获得文件后缀名称
                    String imageName = fileType.substring(fileType.indexOf("/") + 1);
                    // 原名称
                    String oldFileName = file.getOriginalFilename();
                    // 新名称
                    String newFileName = uuid + "." + imageName;
                    // 年月日文件夹
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                    String basedir = sdf.format(new Date());
                    // 进行压缩(大于4M)
                    if (file.getSize() > config.getFileSize()) {
                        // 重新生成
                        String newUUID = UUID.randomUUID().toString().replaceAll("-", "");
                        newFileName = newUUID + "." + imageName;
                        path = config.getUpPath() + "/" + basedir + "/" + newUUID + "." + imageName;
                        // 如果目录不存在则创建目录
                        File oldFile = new File(path);
                        if (!oldFile.exists()) {
                            oldFile.mkdirs();
                        }
                        file.transferTo(oldFile);
                        // 压缩图片
                        Thumbnails.of(oldFile).scale(config.getScaleRatio()).toFile(path);
                        // 显示路径
                        resMap.put("path", "/" + basedir + "/" + newUUID + "." + imageName);
                    } else {
                        path = config.getUpPath() + "/" + basedir + "/" + uuid + "." + imageName;
                        // 如果目录不存在则创建目录
                        File uploadFile = new File(path);
                        if (!uploadFile.exists()) {
                            uploadFile.mkdirs();
                        }
                        file.transferTo(uploadFile);
                        // 显示路径
                        resMap.put("path", "/" + basedir + "/" + uuid + "." + imageName);
                    }
                    resMap.put("oldFileName", oldFileName);
                    resMap.put("newFileName", newFileName);
                    resMap.put("fileSize", file.getSize());
                } else {
                    resMap.put("result", "图片格式不正确,支持png|jpg|jpeg");
                }
                return resMap;
            } catch (Exception e) {
                e.printStackTrace();
                throw new ServiceException(e.getMessage());
            }
        }
    }
    
    6:Controller层的实现
    @Controller
    @RequestMapping("/upload")
    public class FileUploadController {
    
        private static final Logger LOGGER = LoggerFactory.getLogger(FileUploadController.class);
    
        @Autowired
        private FileUpAndDownService fileUpAndDownService;
    
        @RequestMapping(value = "/setFileUpload", method = RequestMethod.POST)
        @ResponseBody
        public ResponseResult setFileUpload(@RequestParam(value = "file", required = false) MultipartFile file) {
            ResponseResult result = new ResponseResult();
            try {
                Map<String, Object> resultMap = upload(file);
                if (!IStatusMessage.SystemStatus.SUCCESS.getMessage().equals(resultMap.get("result"))) {
                    result.setCode(IStatusMessage.SystemStatus.PARAM_ERROR.getCode());
                    result.setMessage((String) resultMap.get("msg"));
                    return result;
                }
                result.setData(resultMap);
            } catch (ServiceException e) {
                e.printStackTrace();
                LOGGER.error(">>>>>>图片上传异常,e={}", e.getMessage());
                result.setCode(IStatusMessage.SystemStatus.ERROR.getCode());
                result.setMessage(IStatusMessage.FILE_UPLOAD_ERROR);
            }
            return result;
        }
    
        private Map<String, Object> upload(MultipartFile file) throws ServiceException {
            Map<String, Object> returnMap = new HashMap<>();
            try {
                if (!file.isEmpty()) {
                    Map<String, Object> picMap = fileUpAndDownService.uploadPicture(file);
                    if (IStatusMessage.SystemStatus.SUCCESS.getMessage().equals(picMap.get("result"))) {
                        return picMap;
                    } else {
                        returnMap.put("result", IStatusMessage.SystemStatus.ERROR.getMessage());
                        returnMap.put("msg", picMap.get("result"));
                    }
                } else {
                    LOGGER.info(">>>>>>上传图片为空文件");
                    returnMap.put("result", IStatusMessage.SystemStatus.ERROR.getMessage());
                    returnMap.put("msg", IStatusMessage.FILE_UPLOAD_NULL);
                }
            } catch (Exception e) {
                e.printStackTrace();
                throw new ServiceException(IStatusMessage.FILE_UPLOAD_ERROR);
            }
            return returnMap;
        }
    }
    
    
    7:springboot项目中还需要添加下面一段代码到Application启动类中
    @SpringBootApplication
    //exclude表示自动配置时不包括Multipart配置
    @EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class})
    public class StartApplication {
    
        public static void main(String[] args) {
            ...
        }
    
        /**
         * 显示声明CommonsMultipartResolver为mutipartResolver
         */
        @Bean(name = "multipartResolver")
        public MultipartResolver multipartResolver() {
            CommonsMultipartResolver resolver = new CommonsMultipartResolver();
            //resolver.setDefaultEncoding("UTF-8");
            //resolveLazily属性启用是为了推迟文件解析,以在在UploadAction中捕获文件大小异常
            resolver.setResolveLazily(true);
            resolver.setMaxInMemorySize(40960);
            resolver.setMaxUploadSize(3 * 1024 * 1024);//上传文件大小 3M 3*1024*1024
            return resolver;
        }
    
    }
    

    顶部 @EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class}) 注解不要忘了

    8:前端HTML界面,直接使用layui

    HTML:

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <body>
    <link rel="stylesheet" href="/js/layui/css/layui.css"/>
    <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/js/layui/layui.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    
    <button type="button" class="layui-btn" id="uploadBtn">
        <i class="layui-icon"></i>上传
    </button>
    
    </body>
    </html>
    

    JS:

    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadBtn' //绑定元素
            , url: '/upload/setFileUpload' //上传接口
            , multiple: true
            , before: function (obj) {
                //可设置回显
                console.log(obj)
            }
            , done: function (res) {
                console.log(res);
                //上传完毕回调
                if (res.code != 1000) {
                    return layer.msg('上传失败');
                } else {
                    return layer.msg('上传成功');
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
    

    上传成功后会返回如下信息:

    上传成功.png

    上传失败:

    上传失败.png

    ServiceException为自定义接口异常处理;
    IStatusMessage为自定义响应状态信息枚举类,就都不贴了

    相关文章

      网友评论

        本文标题:SpringBoot实现上传图片功能

        本文链接:https://www.haomeiwen.com/subject/ndxrpftx.html