关于文件上传

Html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="application/json">
    <title>表单</title>
    <link rel="shortcut icon" th:href="@{/static/favicon.png}"/>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<body>
<div>
    <form id="uploadImage" action="http://localhost:8080/upData" method="post" enctype="multipart/form-data">
        <label>
            Images
            <input id="image" name="file" type="file" accept="image/gif, image/jpg, image/png"/>
        </label>
        <input type="submit" value="提交图片"/>
    </form>
</div>
<!-- 用于实时显示用户上传图片，提供及时反馈 -->
<img id="images" src="" alt="" style="width: 100px;height: 100px;visibility: collapse">
</body>
</html>

这里的enctype很重要
官方解释：

1
2
3
4
5
6
enctype：
如果method属性的值为post ，则enctype是表单提交的MIME 类型 。可能的值：
application/x-www-form-urlencoded ：默认值。
multipart/form-data ：如果表单包含type=file的<input>元素，则使用此选项。
text/plain ：由 HTML5 引入，用于调试目的。
该值可以被<button> 、 <input type="submit"> 或<input type="image"> 元素上的formenctype属性覆盖。

当我们提交的是带有文件的提交时，我们就需要使用multipart/form-data

后端继承自SpringBoot
代码如下：
这里上传的文件会存储在项目同级目录下的static下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@CrossOrigin
@PostMapping("/upData")
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
    String originalFilename = file.getOriginalFilename();
    String FileType = originalFilename.substring(originalFilename.lastIndexOf("."));
    String NewFileName = UUID.randomUUID() + FileType;
    String dir = ResourceUtils.getURL("classpath:").getPath();
    String[] targets = dir.split("target");
    String[] split = targets[0].split("file:/");
    String newDir = split[1];
    String decode = URLDecoder.decode(newDir, "utf-8");
    File Path = new File(decode + "/static/" + NewFileName);
    System.out.println(Path.getPath());
    if (!Path.exists()) {
        Path.mkdirs();
    }
    file.transferTo(Path);
    System.out.println("上传成功");
    return "Success"+Path.getPath();
}