前后端分离文件上传下载例子

前端代码：

<template>
  <div>
    <h2>上传文件和其他参数</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">名称：</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <div>
        <label for="desc">描述：</label>
        <textarea id="desc" v-model="desc"></textarea>
      </div>
      <div>
        <label for="file">文件：</label>
        <input type="file" id="file" @change="handleFileUpload" />
      </div>
      <button type="submit">上传</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      desc: '',
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    submitForm() {
      let formData = new FormData();
      formData.append('name', this.name);
      formData.append('desc', this.desc);
      formData.append('file', this.file);
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(() => {
        alert('上传成功');
      }).catch(() => {
        alert('上传失败');
      });
    }
  }
};
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class FileController {
    private static final String FILE_PATH = "C:/upload/"; // 文件存储路径

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("name") String name,
                             @RequestParam("desc") String desc,
                             @RequestParam("file") MultipartFile file) {
        System.out.println("name: " + name);
        System.out.println("desc: " + desc);
        try {
            String fileName = file.getOriginalFilename();
            File dest = new File(FILE_PATH + fileName);
            file.transferTo(dest);
            return "上传成功";
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败";
        }
    }
}

在这个示例中，我们使用了一个表单来演示上传文件和其他参数。用户可以输入名称和描述，并选择一个文件上传。在后台，我们使用@RequestParam注释来获取名称、描述和文件，并使用MultipartFile类来处理文件上传。可以像处理文件一样处理其他参数。在前端，我们使用FormData对象来创建表单数据，并使用axios发送POST请求将其发送到服务器。在提交表单时，我们将名称、描述和文件添加到FormData对象中。在后台，Spring Boot可以从FormData对象中获取这些参数。