基于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