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

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

1. import React, {
2.     useState } from 'react';
3. import {
4.     Upload, Button, Image, Carousel } from 'antd';
5. import {
6.     UploadOutlined } from '@ant-design/icons';
8. const OFDUploadPreview = () => {
9.    
10.   const [previewImages, setPreviewImages] = useState([]);
12.   // 自定义上传方法
13.   const customRequest = async ({
14.      file, onSuccess }) => {
15.    
16.     const formData = new FormData();
17.     formData.append('file',  file);
18.    
19.     try {
20.    
21.       const response = await fetch('http://localhost:8080/convert-ofd',  {
22.    
23.         method: 'POST',
24.         body: formData
25.       });
26.       
27.       const result = await response.json();
28.       if (result.success)  {
29.    
30.         setPreviewImages(result.images);  // 接收转换后的图片数组
31.         onSuccess(result, file);
32.       }
33.     } catch (error) {
34.    
35.       console.error('Upload  failed:', error);
36.     }
37.   };
39.   return (
40.     <div style={
41.    {
42.     padding: 24 }}>
43.       <Upload
44.         customRequest={
45.    customRequest}
46.         accept=".ofd"
47.         showUploadList={
48.    false}
49.       >
50.         <Button icon={
51.    <UploadOutlined />}>上传OFD文件</Button>
52.       </Upload>
54.       {
55.    /* 多页预览 */}
56.       {
57.    previewImages.length  > 0 && (
58.         <div style={
59.    {
60.     marginTop: 20 }}>
61.           <Carousel dotPosition="top">
62.             {
63.    previewImages.map((img,  index) => (
64.               <div key={
65.    index}>
66.                 <Image
67.                   src={
68.    `data:image/png;base64,${
69.      img}`}
70.                   alt={
71.    `Page ${
72.      index + 1}`}
73.                   style={
74.    {
75.     maxWidth: '100%' }}
76.                 />
77.               </div>
78.             ))}
79.           </Carousel>
80.         </div>
81.       )}
82.     </div>
83.   );
84. };
86. export default OFDUploadPreview;

复制代码

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

1. @RestController
2. @RequestMapping("/convert-ofd")
3. public class OfdConverterController {
4.    
5.    
6.     @PostMapping(consumes = MediaType

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。