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

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

项目使用了springboot + layui

html

<div class="layui-form-item magt3">
					<label class="layui-form-label" style="float: left">项目图片</label>
					<div class="layui-upload">
						<button type="button" class="layui-btn" id="test1">上传图片</button>
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="demo1">
							<p id="demoText"></p>
						</div>
					</div>
				</div>

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);
    }




}

效果图

后台效果

首页效果

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