react antd上传图片视频pdf

antd上传附件分为图片视频文件，我封装成一个组件供使用，以下有几个案例，根据如下进行匹配：
组件：

import './index.less';
import { FileTextOutlined, PlusOutlined } from '@ant-design/icons';
import { useMemoizedFn } from 'ahooks';
import { Empty, Image, message, Upload, UploadProps } from 'antd';
import { RcFile } from 'antd/lib/upload';
import { UploadFile } from 'antd/lib/upload/interface';
import deploy from 'config';
import _ from 'lodash';
import React, { useState } from 'react';
import { getToken } from 'utils';
interface Props extends UploadProps {
fileType?: 'img' | 'office' | 'pdf';
}
const index: React.FC<Props> = React.memo(({ className, fileType, ...props }) => {
const [previewUrl, setPreviewUrl] = useState<string | undefined>();
const handleBeforeUpload = useMemoizedFn((file: RcFile, FileList: RcFile[]) => {
if (fileType === 'pdf') {
if (!file.type.includes('application/pdf')) {
message.info({ content: '请正确的选择PDF', className: 'ant-message-custom no-icon' });
return Upload.LIST_IGNORE;
}
}
if (fileType === 'img') {
if (!file.type.includes('image/')) {
message.info({ content: '请正确的选择图片', className: 'ant-message-custom no-icon' });
return Upload.LIST_IGNORE;
}
}
if (fileType === 'office') {
if (!file.type.includes('application/vnd.openxmlformats') && !file.type.includes('application/vnd.ms')) {
message.info({ content: '请正确的选择文档', className: 'ant-message-custom no-icon' });
return Upload.LIST_IGNORE;
}
}
return true;
});
const handlePreview = useMemoizedFn(async (file: UploadFile<any>) => {
if (file.preview) {
setPreviewUrl(file.preview);
} else if (file.thumbUrl) {
setPreviewUrl(file.thumbUrl);
} else if (file.originFileObj) {
let previewUrl = file.preview ?? (await getBase64(file.originFileObj));
if (previewUrl) setPreviewUrl(previewUrl as string);
}
});
return (
<>
<Upload
className={`ant-upload-file ${className ?? ''}`}
action={`${deploy.SERVER_URL}/datafile/upload`}
headers={{ Authorization: `${getToken()}` }}
listType="picture-card"
{..._.omit(props, ['value', 'defaultValue'])}
onChange={(info) => {
const { file } = info;
if (file.error) {
file.error = {
statusText: '上传失败',
message: '上传失败',
};
}
if (file.response?.message && typeof file.response?.message === 'string') {
file.error = {
statusText: file.response?.message,
message: file.response?.message,
};
message.error(file.response?.message);
file.response.message = undefined;
}
props.onChange && props.onChange(info);
}}
onPreview={props.onPreview ?? handlePreview}
beforeUpload={fileType ? handleBeforeUpload : props.beforeUpload}
>
{props.children ?? (
<div className="ant-upload-button-card">
<PlusOutlined />
<div style={{ marginTop: 8 }}>上传</div>
</div>
)}
</Upload>
<span style={{ display: 'none' }}>
<Image
preview={{ src: previewUrl, visible: Boolean(previewUrl), onVisibleChange: () => setPreviewUrl(undefined) }}
/>
</span>
</>
);
});
/// get Img file Base64
function getBase64(file: RcFile) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
export default index;
export const FileSelectBox: React.FC<{
image?: React.ReactNode;
description?: string;
height?: string | number;
width?: string | number;
style?: React.CSSProperties;
}> = React.memo((props) => {
return (
<div className="ant-upload-file-slect-box" style={{ width: props.width, height: props.height, ...props.style }}>
<Empty
image={props.image ?? <FileTextOutlined />}
imageStyle={{ height: 20 }}
description={props.description ?? '选择文件'}
/>
</div>
);
});

使用图片：

<FileUpload
fileType="img"
style={{ width: '100%' }}
maxCount={3}
defaultFileList={props?.record?.imageList.map((e) => ({
uid: e.id,
name: e.name,
fileName: e.name,
status: 'done',
type: 'image/jpeg',
response: { id: e.id },
thumbUrl: `${deploy.SERVER_URL}/datafile/download?dataFileId=${e.id}&token=${getToken()}`,
}))}
onChange={(info) => {
let ids: string[] = info.fileList.filter((o) => o.status === 'done').map((o) => o.response['id']);
props.form.setFieldsValue({ images: ids });
}}
children={
<div className="ant-upload-button-card">
<FileJpgOutlined style={{ fontSize: 40 }} />
<div style={{ marginTop: 8 }}>选择图片</div>
</div>
}
/>

使用pdf：

<FileUpload
fileType="pdf"
style={{ width: '100%' }}
showUploadList={{
showPreviewIcon: false,
}}
defaultFileList={props?.record?.constructionDrawingsList.map((e) => ({
uid: e.id,
name: e.name,
fileName: e.name,
status: 'done',
type: 'application/pdf',
response: { id: e.id },
}))}
onChange={(info) => {
let ids: string[] = info.fileList.filter((o) => o.status === 'done').map((o) => o.response['id']);
props.form.setFieldsValue({ constructionDrawings: ids });
}}
children={
<div className="ant-upload-button-card">
<FilePdfOutlined style={{ fontSize: 40 }} />
<div style={{ marginTop: 8 }}>选择PDF</div>
</div>
}
/>

视频上传也如上述如此。

最后

以上就是鳗鱼蚂蚁为你收集整理的react antd上传图片视频pdf的全部内容，希望文章能够帮你解决react antd上传图片视频pdf所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。