springboot+vue上传人脸数据到MySQL数据库

首先，需要在后端编写一个用于接收上传文件的接口，可以使用SpringBoot框架自带的MultipartFile类来处理上传的文件。代码示例如下：

@RestController
@RequestMapping("/api")
public class FileUploadController {
    
    @Autowired
    private FaceDataRepository repository;

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return ResponseEntity.badRequest().body("Please select a file to upload");
        }
        
        try {
            byte[] data = file.getBytes();
            InputStream inputStream = new ByteArrayInputStream(data);
            BufferedImage image = ImageIO.read(inputStream);
            
            // 将人脸数据存储到MySQL数据库中
            FaceData faceData = new FaceData();
            faceData.setData(data);
            repository.save(faceData);
            
            return ResponseEntity.ok().body("File uploaded successfully");
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");
        }
    }
}

其中，FaceData是一个数据库实体类，用于存储人脸数据的信息，具体定义如下：

@Entity
@Table(name = "face_data")
public class FaceData {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Lob
    private byte[] data;

    // getter/setter 略
}

然后，在前端编写一个文件上传组件，使用Vue框架可以使用vue-upload-component库，示例代码如下：

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

<script>
import VueUploadComponent from 'vue-upload-component'
export default {
  components: {
    vueUploadComponent: VueUploadComponent
  },
  methods: {
    async uploadFile() {
      const files = this.$refs.fileInput.files
      const formData = new FormData()
      formData.append('file', files[0])

      try {
        await this.$http.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        alert('File uploaded successfully')
      } catch (e) {
        console.log(e)
        alert('Failed to upload file')
      }
    }
  }
}
</script>

注意，需要在Vue组件中引入axios库，在main.js中添加如下代码：

import axios from 'axios'
Vue.prototype.$http = axios.create({
  baseURL: 'http://localhost:8080'
})

其中，baseURL为后端接口的地址。完整代码如下：

FileUploadController.java

@RestController
@RequestMapping("/api")
public class FileUploadController {

    @Autowired
    private FaceDataRepository repository;

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return ResponseEntity.badRequest().body("Please select a file to upload");
        }

        try {
            byte[] data = file.getBytes();
            InputStream inputStream = new ByteArrayInputStream(data);
            BufferedImage image = ImageIO.read(inputStream);

            // 将人脸数据存储到MySQL数据库中
            FaceData faceData = new FaceData();
            faceData.setData(data);
            repository.save(faceData);

            return ResponseEntity.ok().body("File uploaded successfully");
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");
        }
    }
}

FaceData.java

@Entity
@Table(name = "face_data")
public class FaceData {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Lob
    private byte[] data;

    // getter/setter 略
}

App.vue

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

<script>
import VueUploadComponent from 'vue-upload-component'
export default {
  components: {
    vueUploadComponent: VueUploadComponent
  },
  methods: {
    async uploadFile() {
      const files = this.$refs.fileInput.files
      const formData = new FormData()
      formData.append('file', files[0])

      try {
        await this.$http.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        alert('File uploaded successfully')
      } catch (e) {
        console.log(e)
        alert('Failed to upload file')
      }
    }
  }
}
</script>