springboot+layui上传图片保存到服务器

柔光的暖阳◎ 2021-11-13 23:02 633阅读 0赞

***最近给学校做了一个捐赠平台的项目，里面用到了上传图片保存到服务器的需求，在这里记录一下***

# 项目使用了springboot + layui #

# html #

# js #

//普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/project/projectPictureUpload'
            ,method:'post'
            ,accept:'images'
            ,acceptMime:'image/*'
            ,field:'projectImg'
            ,choose: function (obj) {
                //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     //图片预览
                //     $('#demo1').attr('src', result); //图片链接（base64）
                // });
            }
            ,done: function (res) {
                //如果上传失败
                if (res.code == 250) {
                    return layer.msg('上传项目图片失败',{icon: 5});
                }
                //上传成功,获得图片地址
                $('#demo1').attr('src', res.data);
            }
            ,error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

> 由于项目是异步提交图片，当确认图片后就会立即上传,服务器会返回图片地址，需要将图片地址和  
> 项目其他信息一起保存在数据库，使用以下js可以获得到图片的地址

$('#demo1')[0].src                    //图片地址

# controller #

@PostMapping("/projectPictureUpload")
        @ResponseBody
        public Result projectPictureUpload(@RequestParam(value = "projectImg",required = true)MultipartFile file){
            //将图片上传到服务器
            if(file.isEmpty()){
                return Result.error(ResultCodeConstants.UPLOAD_FAIL,"项目图片不能为空");
            }
            //原始文件名
            String originalFilename = file.getOriginalFilename();
            //文件后缀
            String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //图片名称为uuid+图片后缀防止冲突
            String fileName = UUID.randomUUID().toString()+"."+suffix;
            String os = System.getProperty("os.name");
            //文件保存路径
            String filePath="";
            if(os.toLowerCase().startsWith("win")){
                //windows下的路径
                filePath ="d:/pictureUpload/project/";
            }else {
                //linux下的路径
                filePath="/root/pictureUpload/project/";
            }
            try {
                //写入图片
                Boolean writePictureflag = FileUtils.uploadFile(file.getBytes(),filePath,fileName);
                if(writePictureflag == false){
                    //上传图片失败
                    return Result.error(ResultCodeConstants.UPLOAD_FAIL,"上传项目图片失败");
                }
                //上传成功后，将可以访问的完整路径返回
                String fullImgpath = "/pictureUpload/project/"+fileName;
                return Result.ok(fullImgpath,"上传图片成功");
            } catch (Exception e) {
                e.printStackTrace();
                //上传图片失败
                return Result.error(ResultCodeConstants.UPLOAD_FAIL,"上传项目图片失败");
            }
        }

# 工具类 #

package com.iot.donation.util;
    
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    
    /**
     * @Author 张满
     * @Description  文件操作相关工具类
     * @Date 2019/7/31 15:46
     * @vsersion 1.0.0
     **/
    public class FileUtils {
    
    
        /**
         * @Author 张满
         * @Description 文件上传
         * @Date 2019/7/31  15:48
         * @Param [file, filePath, fileName]
         * @return void
         **/
        public static Boolean uploadFile(byte[] file, String filePath, String fileName) throws Exception {
            FileOutputStream out = null;
            try {
                File targetFile = new File(filePath);
                //如果目录不存在，创建目录
                if(!targetFile.exists()){
                    targetFile.mkdirs();
                }
                out = new FileOutputStream(filePath+fileName);
                out.write(file);
                out.flush();
                //写入成功
                return true;
            } catch (IOException e) {
                e.printStackTrace();
                //写入失败
                return false;
            } finally {
                out.close();
            }
        }
    
    }

# springboot配置静态资源访问 #

package com.iot.donation.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    
    @Configuration
    public class MyWebMvcConfig extends WebMvcConfigurationSupport {
    
        /**
         * 解决springboot2.0静态资源无法直接访问问题
         * @param registry
         */
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    
    
            registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    
            String os = System.getProperty("os.name");
            System.out.println(os);
            if(os.toLowerCase().startsWith("win")){
                //--------------------------------------windows下保存路径-------------------------------------------------------------
                //项目图片访问路径
                registry.addResourceHandler("/pictureUpload/project/**").addResourceLocations("file:D:/pictureUpload/project/");
            }else{
                //--------------------------------------linux下保存路径---------------------------------------------------------------------------------
                //项目图片访问路径
                registry.addResourceHandler("/pictureUpload/project/**").addResourceLocations("file:/root/pictureUpload/project/");
            }
            super.addResourceHandlers(registry);
        }
    
    
    
    
    }

# 效果图 #

## 后台效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ptOTg5OA_size_16_color_FFFFFF_t_70]

## 首页效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ptOTg5OA_size_16_color_FFFFFF_t_70 1]

由于后台没有给图片大小，长宽高的限制，所以首页图片显示时只取了一部分，留着以后改进一下

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ptOTg5OA_size_16_color_FFFFFF_t_70]: /images/20211113/a2623f412126496bb7d2594179f57803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ptOTg5OA_size_16_color_FFFFFF_t_70 1]: /images/20211113/e3bef92b1c3c453d9405b0703d3c3f2d.png