前后端数据传输，文件上传不到数据库

Question

用表单传数据，但是上传文件功能实现不了，其他数据都能传到数据库表，文件传进去是空的（不是null）:
1 数据库表情况：

前端代码：
2 表单：

3 传数据js函数：

4 传文件按钮js函数：

5 后端controller代码：这里通过测试是可以获取到文件的相关数据的

不知道是不是表单传数据的双向绑定哪里出错了，获取不到文件的值？

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在前端使用了uni-app框架，后端使用的是Spring Boot。从代码来看，前端部分似乎没有正确处理文件上传，导致文件没有传递给后端。以下是针对前端和后端的一些调整建议。

首先，前端 uni-app 部分：

1. 在表单中添加一个隐藏输入框用于存储文件名，这样在提交表单时可以将文件名一并发送到后端。
2. 更新 submitForm 函数，以便在文件上传完成后更新隐藏输入框的值，并重新触发表单提交。

修改后的HTML:

<!-- 添加隐藏输入框 -->
<input type="hidden" name="jlFileName" v-model="jlFileName">

修改后的JS:

data() {
  return {
    // ... 其他数据
    jlFileName: '', // 新增字段，用于存储文件名
  };
},

methods: {
  async submitForm(formName) {
    if (this.form.name && this.form.gw) {
      // 确保jlFileName已设置为正确的文件名
      await this.setJlFileName();
      
      // 提交表单
      this.$http.post('/qz/save', {
        userId: '111',
        xm: this.form.name,
        gw: this.form.gw,
        nl: this.form.age,
        xl: this.form.xl,
        xh: this.form.sex,
        j1: this.form.j1,
        1xfs: this.form.phone,
        jlFileName: this.jlFileName, // 使用jlFileName字段
      }).then((res) => {
        alert('发送成功！');
      }).catch((err) => {
        alert('发送失败！');
      });
    }
  },

  async setJlFileName() {
    if (this.form.jl) {
      const tempFilePaths = this.form.jl.tempFilePaths;
      for (let i = 0; i < tempFilePaths.length; i++) {
        // ... 保持upload()函数不变
      }
      this.jlFileName = tempFilePaths[0]; // 或者根据实际需求取最后一个文件名
    } else {
      console.error('请选择文件');
    }
  },

  upload() {
    // ... 保持upload()函数不变
  },
},

然后，后端 Spring Boot 部分：

1. 为了确保文件名与前端一致，你需要在后端接收文件时同时获取文件名。
2. 如果你想在数据库中存储文件信息，你需要考虑如何将文件保存到服务器，以及如何在数据库中存储文件路径或其他相关信息。

在你的现有代码基础上进行一些调整：

@PostMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file, @RequestParam("jlFileName") String jlFileName) throws IOException {
    // ... 保持获取原始文件名的部分不变

    // 使用从前端接收到的jlFileName
    String id = UUID.randomUUID().toString();
    id = id.replace("-", " ");
    id += "_" + jlFileName;

    // ... 保持剩余部分不变
}

这些修改应该能让你的前端将文件及其名称一起发送到后端。然而，关于后端如何处理文件和将其保存到数据库，这取决于你的具体需求和架构。通常做法是将文件保存到服务器某个目录，并在数据库中记录文件的路径或者其他关键信息，例如文件名、大小等。如果你需要进一步的帮助，比如如何在Spring Boot中保存文件到特定位置以及如何在数据库中存储这些信息，请告诉我，我会提供更详细的指导。