SSM+vue如何实现文件上传下载并存储路径在数据库中

在SSM（Spring、Spring MVC、MyBatis）框架中配合Vue前端，实现文件上传、下载以及将文件路径存储到数据库的过程可以分为以下几个步骤：

1. **前端（Vue.js）**:
- 使用Vue的`axios`库或其他HTTP客户端发送文件上传请求到服务器。使用`FormData`对象来封装文件数据。
- 文件上传成功后，将返回的文件ID或URL保存在本地，例如Vuex状态管理中。

<template>
  <input type="file" @change="uploadFile" />
</template>

<script>
export default {
  methods: {
    uploadFile(e) {
      const file = e.target.files[0];
      axios.post('/api/file/upload', new FormData({ file }), { headers: {'Content-Type': 'multipart/form-data'} })
        .then(response => {
          // 存储响应中的文件ID到Vuex store
          this.$store.commit('setUploadedFileId', response.data.id);
        });
    }
  }
}
</script>

2. **后端（Spring MVC + MyBatis）**:
- 创建一个Controller来接收文件上传，使用Spring MVC的`MultipartFile`处理文件，然后持久化文件到服务器磁盘，并生成一个唯一的文件名或ID。
- 将这个ID存储到数据库，如MySQL，通常会有一个专门的表来存储文件信息，字段包含文件ID、用户ID等。

@PostMapping("/file/upload")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
    // 检查文件类型并保存到服务器目录
    String fileName = saveFileToServer(file);

    // 储存文件路径到数据库
    FileRepository.save(new FileInfo(fileName, userId));

    return ResponseEntity.ok(fileName); // 返回文件名或URL给前端
}

@Transactional
public void saveFileToServer(MultipartFile file) {
    // ...
}

3. **文件下载**:
- 在前端，通过`axios`从数据库查询到文件路径，构造下载链接或直接读取文件内容提供下载。
- 后端同样需要提供一个下载资源的接口，根据文件ID从磁盘读取文件并响应HTTP请求头以支持下载。

4. **数据库操作**:
- `FileInfo`实体类应该有字段表示文件ID、用户ID以及可能的额外元数据，如文件大小、创建时间等。

@Entity
public class FileInfo {
    @Id
    private Long fileId;
    private Long userId;
    private String filePath;
    private Date createTime;
    // 添加其他字段...
}