action：文件上传的接口
on-success：文件上传成功后的钩子函数，也就是给对应的字段初始化

FileController

核心功能

文件上传：通过/files/upload接口接收前端上传的文件
文件下载：通过/files/download/{fileName}接口提供文件下载

文件存储路径:

1
private static final String filePath = System.getProperty("user.dir") + "/files/";

文件下载逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
@GetMapping("/download/{fileName}")
public void download(@PathVariable String fileName, HttpServletResponse response) {
    // 设置下载文件http响应头
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, StandardCharsets.UTF_8));
    // 读取文件字节流,通过文件的存储路径拿到文件字节数组
    byte[] bytes = FileUtil.readBytes(realFilePath);
    // 写入响应输出流
    ServletOutputStream os = response.getOutputStream();
  // 将文件字节数组写出到文件流
    os.write(bytes);
    os.flush();
    os.close();
}

使用@PathVariable获取文件名参数
设置Content-Disposition响应头告诉浏览器这是下载文件
使用URLEncoder对文件名编码，处理中文文件名问题
通过HttpServletResponse直接输出文件流

配置相关

1
2
@Value("${fileBaseUrl}")
private String fileBaseUrl;

从配置文件读取fileBaseUrl，灵活配置文件访问的基础URL
这样可以在不同环境(开发/测试/生产)使用不同的域名

前端

1
2
3
4
5
6
7
<el-table-column label="头像" prop="avatar">
  <!--头像列，scope是当前行的数据，scope.row.avatar是当前行的头像路径-->
  <template v-slot="scope">
    <!--scope图片组件，src是图片的路径，style是图片的样式，width是图片的宽度，height是图片的高度，border-radius是图片的圆角-->
    <el-image :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%"></el-image>
  </template>
</el-table-column>
1
2
3
4
5
6
7
8
<!--图片上传，上传成功后会调用handleImgSuccess方法，上传成功后会返回一个url，我们把这个url赋值给data.form.avatar-->
<el-form-item label="头像" prop="avatar">
  <!--el-upload 上传组件，action是上传的地址，list-type是上传的类型，on-success是上传成功后的回调方法-->
  <el-upload :action="uploadUrl" list-type="picture" :on-success="handleImgSuccess">
    <!--el-button 按钮组件，type是按钮的类型，primary是主按钮-->
    <el-button type="primary">上传图片</el-button>
  </el-upload>
</el-form-item>
1
2
3
4
//定义上传接口地址，这里是后端提供的接口地址
//VITE_BASE_URL是在.env.development文件中定义的，这里是开发环境的地址
// /files/upload是后端提供的接口地址
const uploadUrl = import.meta.env.VITE_BASE_URL + '/files/upload';
1
2
3
4
5
6
7
8
//上传成功后调用的方法，把上传成功后的图片地址赋值给data.form.avatar
//res.data.url 是上传成功后的图片地址
const handleImgSuccess = (res) => {
  // res.data.url 是上传成功后的图片地址
  // 我们把这个地址赋值给data.form.avatar
  data.form.avatar = res.data.url
  //相当于和avatar绑定了
}