首页 前端知识 [SpringBoot Html]实现简单的文件上传并存储至本地,含前后端代码

[SpringBoot Html]实现简单的文件上传并存储至本地,含前后端代码

2024-05-10 22:05:08 前端知识 前端哥 189 751 我要收藏

 

1.前端upload.html

三要素:

        ①method="post"

        ②enctype="mutipart/form-data"

        ③type="file"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>

    <!--上传文件,表单格式必须为"multipart/form-data" -->
    <form action="/upload" method="post" enctype="multipart/form-data">
        姓名: <input type="text" name="username"><br>
        年龄: <input type="text" name="age"><br>
        头像: <input type="file" name="image"><br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

2. 后端UploadController.java

①服务端接收文件 参数:MultipartFile image

②获取原始文件名

③获取文件扩展名

④运用uuid构造唯一文件名

⑤将文件存储在服务器的磁盘目录

import com.itheima.pojo.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
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.io.IOException;
import java.util.UUID;

@Slf4j
@RestController
public class UploadController {


    //本地存储文件
    @PostMapping("/upload")
    public Result upload(String username, Integer age, @RequestParam("image") MultipartFile file) throws IOException {
        log.info("文件上传:{},{},{}", username, age, file);
        //获取原始文件名
        String originalFilename = file.getOriginalFilename();
        //获取文件扩展名 123.2.1.jpg
        int index = originalFilename.lastIndexOf("."); //最后一个.的下标
        String extname = originalFilename.substring(index);
        //构造唯一的文件名(不能重复) -- uuid(通用唯一识别码)040bf482-284b-40a6-bf61-15c811d1b0d0
        String newFilename = UUID.randomUUID().toString() + extname;
        log.info("新的文件名:{}", newFilename);

        //将文件存储在服务器的磁盘目录中 D:\demo\files
        file.transferTo(new File("D:\\demo\\files\\"
                        + newFilename));
        return Result.success();
    }

}

注意:若上传的文件过大会报错,需在application.propertis或yml文件中配置文件大小

95181604af844f65a141db37087e16bb.png

启动服务器,测试:

 194115215c1841f4b29d286721c9b35b.png

18cb6b595fcf4bcf87df2448c713ffb1.png

请求成功!查看D:\demo\files也有对应上传的文件

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8038.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!