基于React + Antd + Java的OFD文件上传预览实现方案(OFD文件转图片)

一、前端实现方案（React + Antd）

import React, {
    useState } from 'react';
import {
    Upload, Button, Image, Carousel } from 'antd';
import {
    UploadOutlined } from '@ant-design/icons';
 
const OFDUploadPreview = () => {
   
  const [previewImages, setPreviewImages] = useState([]);
 
  // 自定义上传方法 
  const customRequest = async ({
     file, onSuccess }) => {
   
    const formData = new FormData();
    formData.append('file',  file);
    
    try {
   
      const response = await fetch('http://localhost:8080/convert-ofd',  {
   
        method: 'POST',
        body: formData 
      });
      
      const result = await response.json(); 
      if (result.success)  {
   
        setPreviewImages(result.images);  // 接收转换后的图片数组 
        onSuccess(result, file);
      }
    } catch (error) {
   
      console.error('Upload  failed:', error);
    }
  };
 
  return (
    <div style={
   {
    padding: 24 }}>
      <Upload 
        customRequest={
   customRequest}
        accept=".ofd"
        showUploadList={
   false}
      >
        <Button icon={
   <UploadOutlined />}>上传OFD文件</Button>
      </Upload>
 
      {
   /* 多页预览 */}
      {
   previewImages.length  > 0 && (
        <div style={
   {
    marginTop: 20 }}>
          <Carousel dotPosition="top">
            {
   previewImages.map((img,  index) => (
              <div key={
   index}>
                <Image 
                  src={
   `data:image/png;base64,${
     img}`}
                  alt={
   `Page ${
     index + 1}`}
                  style={
   {
    maxWidth: '100%' }}
                />
              </div>
            ))}
          </Carousel>
        </div>
      )}
    </div>
  );
};
 
export default OFDUploadPreview;

二、后端Java实现方案（Spring Boot）

@RestController 
@RequestMapping("/convert-ofd")
public class OfdConverterController {
   
    
    @PostMapping(consumes = MediaType