上传文件的后端程序handleFileUpload()、getOriginalFilename()、UUID及Yaml配置

handleFileUpload()是Element UI中用于自定义文件上传行为的函数,通过http-request属性绑定实现。该函数会在文件选择后触发,负责处理文件上传逻辑,包括文件格式验证、上传进度控制及服务器交互等。

核心功能

  1. 文件验证‌:可添加文件类型、大小等验证逻辑,例如仅允许上传指定格式或小于特定大小的文件。
  2. 上传处理‌:调用自定义上传接口(如AJAX请求),需包含文件数据和必要的请求头(如token验证)。 ‌
  3. 交互反馈‌:支持上传成功/失败提示,并可通过file-list更新界面显示。

例子:前端

<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>

后端

    @PostMapping("/upload")
    public Result upload(String name, Integer age, MultipartFile file) throws IOException {
        log.info("接收参数: {},{},{}", name, age, file);
        //获取原始文件名
        String originalFilename = file.getOriginalFilename(); //1.jpg  22.2.2.2.png

        //新的文件名
        String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + extension;

        //保存文件
        file.transferTo(new File("D:/images/" + newFileName));
        return Result.success();
    }
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 50MB

注意事项

  • 兼容性‌:需确保后端支持自定义上传逻辑,避免直接使用默认action属性(通常需留空以满足组件校验)。
  • 安全性‌:建议通过https传输文件数据,并验证服务器响应状态。

 

posted @ 2025-10-04 16:19  休玛  阅读(6)  评论(0)    收藏  举报