一.SpringBoot配置静态文件访问

如果是不设置这个静态访问地址，上传的文件不会被访问到，而且如果不是用流来上传图片的话只能写绝对地址，如果用流上传文件的话，可以设置为当前项目，这样上传的时候，就会上传到当前项目目录下

package com.tms.tblog.infrastructure.config;

import org.springframework.boot.system.ApplicationHome;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.io.File;

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
    //对静态资源的配置
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/", "classpath:/test", "file:" + "upload");

        ApplicationHome h = new ApplicationHome(getClass());
        File jarF = h.getSource();
        String dirPath = jarF.getParentFile().toString() + "/upload/";
        registry.addResourceHandler("/upload/**").addResourceLocations("file:" + dirPath);
    }
}

二.编写一个上传文件的代码

1.编写一个控制器用来接收上传文件的接口Controller

package com.tms.tblog.controller;

import com.tms.tblog.dto.ResultDto;
import com.tms.tblog.infrastructure.untils.FileUtil;
import io.swagger.annotations.Api;
import lombok.extern.log4j.Log4j2;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.UUID;

@Api(tags = "上传")
@RestController
@Log4j2
@RequestMapping("/tblog/upload")
public class UploadController {
    //头像上传
    @PostMapping("/upload")
    public ResultDto uploadAvatar(@RequestParam("files") MultipartFile file) {
        if (file.isEmpty()) {
            return new ResultDto("1", "请选择文件", null);
        }

        //保存地址
        String pathName = "upload/img/";
        File filePath = new File(pathName);
        // 判断目录是否存在，如果不存在,创建文件目录
        if (!filePath.exists() && !filePath.isDirectory()) {
            System.out.println("目录不存在，创建目录:" + filePath);
            filePath.mkdirs();
        }

        //获取文件名（包括后缀）
        String uploadName = file.getOriginalFilename();
        // 取得文件名后缀
        String suffix = uploadName.substring(uploadName.lastIndexOf(".") + 1);
        // 获取文件名去掉后缀
        String fileName = uploadName.substring(0, uploadName.lastIndexOf("."));
        // 定义一个uuid用来保存图片的名字，也可以根据自己的需求来定义保存文件的名字
        UUID uuid = UUID.randomUUID();
        // 全文件路径名
        String pathFullName = pathName + fileName + "_" + uuid.toString() + "." + suffix;

        return FileUtil.saveFile(file, pathFullName);
    }
}

2.编写一个文件工具类，用来编写文件相关操作的共通方法FileUtil

package com.tms.tblog.infrastructure.untils;

import com.tms.tblog.dto.ResultDto;
import org.springframework.web.multipart.MultipartFile;

import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class FileUtil {

    /**
     * 保存文件（文件流）
     *
     * @param file         文件
     * @param pathFullName 保存路径
     * @return
     */
    public static ResultDto saveFile(MultipartFile file, String pathFullName) {
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(pathFullName);
            fos.write(file.getBytes()); // 写入文件
            Map map = new HashMap();
            map.put("url", pathFullName);
            return new ResultDto("0", "上传成功", map);

        } catch (Exception e) {
            e.printStackTrace();
            return new ResultDto("0", "上传失败", null);
        } finally {
            try {
                fos.close();
            } catch (IOException e) {
                e.printStackTrace();
                return new ResultDto("0", "上传失败", null);
            }
        }
    }
}

三.编写一个测试前台，展示效果

1.编写前端代码，采用简单的layui的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录界面</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <script src="/lib/layui/layui.js"></script>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>登录界面</h1>
<div class="layui-input-block">
    <form action="" class="layui-form" enctype="multipart/form-data" method="post">
        <input type="hidden" name="blogImg" id="imgPath" value="">
        <div class="form-group"><label>图片上传</label>
            <input type='file' style='margin:5px;' name='files' required><br>
            <button type="button" class="layui-btn" id="img_upload">上传图片</button>
        </div>
        <input type="submit">
    </form>
</div>

<script>
    // 提交菜单
    layui.use(['upload', 'layer', 'form'], function () {
        var form = layui.form;
        var upload = layui.upload;
        //普通图片上传
        $('#img_upload').click(function () {
            var formData = new FormData();//获取选择的文件
            $.each($('input[name="files"]'), function (index, item) {
                formData.append("files", item.files[0])
            });//发送异步请求
            $.ajax({
                method: 'post',
                url: '/tblog/upload/upload',//文件上传接口
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {//成功返回触发的方法
                    $('#imgPath').val(data);
                    alert("上传成功");
                },//请求失败触发的方法
                error: function () {
                    alert("上传失败");
                }
            });
        });
    });
</script>
</body>
</html>

14.SpringBoot图片文件上传

一.SpringBoot配置静态文件访问

二.编写一个上传文件的代码

1.编写一个控制器用来接收上传文件的接口Controller

2.编写一个文件工具类，用来编写文件相关操作的共通方法FileUtil

三.编写一个测试前台，展示效果

1.编写前端代码，采用简单的layui的样式

2.最后效果

评论 (0)

一.SpringBoot配置静态文件访问

二.编写一个上传文件的代码

1.编写一个控制器用来接收上传文件的接口Controller

2.编写一个文件工具类，用来编写文件相关操作的共通方法FileUtil

三.编写一个测试前台，展示效果

1.编写前端代码，采用简单的layui的样式

2.最后效果

推荐阅读

评论 (0)