Vue上传文件时携带一个参数,后台SpringBoot项目接收请求

在Vue中上传文件时，可以通过FormData对象来传递参数和文件。示例如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      param: 'value' // 携带的参数
    }
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0]
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)
      formData.append('param', this.param)
      // 发送请求
      this.$http.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

在SpringBoot后台项目中，可以通过@RequestParam注解来接收表单数据中的参数和文件。示例如下：

@PostMapping("/api/upload")
public ResponseEntity<String> uploadFile(
        @RequestParam("file") MultipartFile file,
        @RequestParam("param") String param) {
    // 处理上传的文件和参数
    return ResponseEntity.ok("上传成功");
}