一、前端實現方案（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