springboot+vue+element从MySQL中获取存储的二进制文件并还原二进制文件

在Spring Boot中，可以使用JPA或MyBatis等ORM框架来操作MySQL数据库。对于存储的二进制文件，可以使用byte[]类型来存储，然后在需要还原的地方将其从数据库中读取出来。

下面是一个示例：

1. 创建一个实体类来映射数据库中的表：

@Entity
@Table(name = "file")
public class FileEntity {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String fileName;
    
    private byte[] content;
    
    // getter and setter
}

2. 在Service层中定义一个方法来获取二进制文件：

@Service
public class FileService {
    
    @Autowired
    private FileRepository fileRepository;
    
    public byte[] getFileContent(Long fileId) {
        return fileRepository.findById(fileId)
                .orElseThrow(() -> new RuntimeException("File not found"))
                .getContent();
    }
}

3. 在Controller层中定义一个接口来返回二进制文件：

@RestController
public class FileController {
    
    @Autowired
    private FileService fileService;
    
    @GetMapping("/file/{id}")
    public ResponseEntity<byte[]> getFile(@PathVariable Long id) {
        byte[] content = fileService.getFileContent(id);
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        headers.setContentDispositionFormData("attachment", "file.bin");
        return new ResponseEntity<>(content, headers, HttpStatus.OK);
    }
}

4. 在Vue中，可以使用axios来调用上述接口：

axios({
  method: 'get',
  url: '/file/' + fileId,
  responseType: 'blob'
}).then(response => {
  const blob = new Blob([response.data]);
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.bin');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

5. 在Element UI中，可以使用el-button来触发上述逻辑：

<template>
  <div>
    <el-button @click="downloadFile">Download File</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'DownloadFile',
  data() {
    return {
      fileId: 1
    };
  },
  methods: {
    downloadFile() {
      axios({
        method: 'get',
        url: '/file/' + this.fileId,
        responseType: 'blob'
      }).then(response => {
        const blob = new Blob([response.data]);
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.bin');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};
</script>