{...UploadProps} 只能上传JPG, PNG ,Word,Xlsx或Pdf 文件

最新推荐文章于 2024-04-19 16:31:06 发布

sunsying

最新推荐文章于 2024-04-19 16:31:06 发布

阅读量761

点赞数

本文链接：https://blog.csdn.net/synine/article/details/129386518

版权

react +antd +ts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该代码段展示了一个React组件的配置，用于限制上传的文件类型只能是JPG,PNG,Word文档,Excel的Xlsx格式或Pdf文件，并且检查文件大小必须小于3MB。如果文件类型或大小不符合要求，用户会收到错误消息。上传成功后，文件路径会被存储并可以用于下载或回显。

摘要由CSDN通过智能技术生成

对上传文件进行限制，只能是 JPG, PNG ,Word,Xlsx或Pdf 文件

上传下载回显

	const UploadProps: UploadProps = {
		name: 'file',
		listType: 'text',
		action: `${environment.baseUrl}/api/Files/UploadFile/EmailAttach`,
		headers: {
			Authorization: getAuthority(),
		},
		maxCount: 1,
		beforeUpload(file) {

			const isJpgOrPng =
				file.type === 'image/jpeg' ||
				file.type === 'image/png' ||
				file.type === 'application/pdf' ||
				file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
				file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				;
			if (!isJpgOrPng) {
				message.error('附件只能是 JPG, PNG ,Word,Xlsx或Pdf 文件!');
				return Upload.LIST_IGNORE;
			}
			const isLt2M = file.size / 1024 / 1024 < 3;
			if (!isLt2M) {
				message.error('文件大小必须小于3MB!');
				return Upload.LIST_IGNORE;
			}
			return isJpgOrPng && isLt2M;
		},

		onChange(info) {
			if (info.file.status === 'uploading') {
				return;
			}
			if (info.file.status === 'done') {
				setAttachFilePath(info.file.response.ResData);
			}

		},
	};

const UploadBtns = () => {
		if (dataItem?.AppendixUrl) {
			return (
				<>
					<div className="appendix_url">
						<a href={`${baseUrl}${dataItem?.AppendixUrl}`} target="_blank">
							<Tooltip title="Click to download the file">
								<div style={{ width: '10%' }}>
									<img src={wordImg} alt="" />
									<span>Sick leave</span>
								</div>
							</Tooltip>
						</a>
					</div>
				</>
			)
		} else if (!dataItem?.AppendixUrl && !action) {
			return (
				<>
					<div className="upload_btn">
						<Form.Item name="AppendixUrl"
							rules={[
								{
									required: true,
									message: 'Please upload the resignation letter',
								}
							]}
						>
							<Upload {...UploadProps}>
								<Button
									className="add_appendix"
									icon={<PlusOutlined />}
									size="large"
								>
									Add appendix
								</Button>
							</Upload>
						</Form.Item>
					</div>
				</>
			)
		}
	}