基于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 = 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('Uploadfailed:', 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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]