Featured image of post 如何实现简单的文件上传功能

如何实现简单的文件上传功能

简单的上传数据案例

1730字

简单的文件上传功能的实现

1. 概述

文件上传功能允许用户将本地文件(如图片、视频、音频)传输到服务器,常见于微博、微信朋友圈等场景。实现需结合前端表单和后端接口处理。


2. 实现步骤

2.1 前端表单

使用<form>标签提交数据,要注意的三要素:

  • enctype="multipart/form-data"以支持文件传输。
  • method类型必须为POST
  • 需要有一个<input type="file" name="file">,才能上传文件。
1
2
3
4
5
6
<form action="/upload" method="post" enctype="multipart/form-data">
    姓名:<input type="text" name="name"> <br>
    年龄:<input type="text" name="age"> <br>
    图像:<input type="file" name="file"> <br>
    <input type="submit" value="上传文件" name="submit">
</form>

2.2 后端控制器(Spring Boot)

通过@PostMapping接收文件,使用MultipartFile处理上传内容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 定义一个REST风格的控制器类,用于处理文件上传请求
@RestController  
public class UploadController {  

    // 处理POST请求,路径为"/upload"
    @PostMapping("/upload")  
    // 方法参数:name(字符串类型),age(整数类型),file(MultipartFile类型)
    public Result upload(String name, Integer age, MultipartFile file) throws IOException {  
        // 打印日志,记录上传的文件信息
        log.info("文件上传: {}, {}, {}", name, age, file);  
        
        // 保存文件到指定目录
        // 获取上传文件的原始文件名
        String originalFilename = file.getOriginalFilename();  
        
        // 生成新的文件名:
        // 1. 获取文件扩展名(从最后一个"."开始截取)
        String extension = originalFilename.substring(originalFilename.lastIndexOf("."));  
        // 2. 使用UUID生成随机文件名,并拼接扩展名
        String newFileName = UUID.randomUUID().toString() + extension;  
        
        // 将文件保存到本地目录(这里是Windows桌面下的images文件夹)
        file.transferTo(new File("C:\\Users\\LENOVO\\Desktop\\杂项\\images\\" + newFileName));  
        
        // 返回成功结果
        return Result.success();  
    }  
}

这段代码实现了一个基于Spring Boot的文件上传功能,下面我将讲解其中的关键知识点:

 @RestController 注解

  • 这是一个组合注解,相当于@Controller + @ResponseBody
  • 表示这个类是一个RESTful风格的控制器,所有方法的返回值都会自动转换为JSON格式

@PostMapping 注解

  • 用于映射HTTP POST请求到特定的处理方法
  • 这里指定了路径为"/upload",表示处理上传到该路径的POST请求

文件上传参数

  • MultipartFile是Spring提供的接口,用于处理文件上传
  • 可以获取文件名(getOriginalFilename())、文件内容、大小等信息
  • 文件上传时,表单的enctype必须设置为multipart/form-data

文件处理流程

  1. ​获取原始文件名​​:file.getOriginalFilename()
  2. ​提取文件扩展名​​:通过lastIndexOf(".")找到最后一个点,然后截取后缀
  3. ​生成新文件名​​:使用UUID.randomUUID()生成唯一ID,避免文件名冲突
  4. ​保存文件​​:transferTo()方法将文件保存到指定路径

文件存储路径

  • 代码中使用的是绝对路径C:\Users\LENOVO\Desktop\杂项\images\

3. 核心知识点

3.1 文件存储方法

  • 获取文件名multipartFile.getOriginalFilename()
  • 保存到本地multipartFile.transferTo(File dest)

3.2 文件大小限制配置

默认限制为 1MB,超出需在配置文件中调整:

1
2
3
4
5
spring:
  servlet:
    multipart:
      max-file-size: 10MB    # 单个文件最大大小
      max-request-size: 100MB # 请求总大小(含所有文件)

4. 注意事项

  1. 文件大小限制
    默认配置可能导致大文件上传失败,需根据需求调整application.yml

  2. 安全性

    • 校验文件类型,防止恶意文件上传(如.exe)。
    • 限制上传目录权限,避免非法访问。
  3. 异常处理
    捕获IOExceptionSizeLimitExceededException,返回友好提示。

  4. 文件名冲突
    建议对上传文件重命名(如UUID),避免覆盖已有文件。


5. 总结

  • 前端表单需设置enctype="multipart/form-data"
  • 后端通过MultipartFile接收文件,使用transferTo()保存。
  • 配置文件大小限制,增强安全防护。
如对内容有异议,请联系关邮箱2285786274@qq.com修改