Upload组件-文件选择后不立即上传

很多时候我们在用 Upload 组件上传文件的时候，选择文件后并不想立刻上传，而是要等待其他表单内容一起上传。方法就是不在 action 里面写上传地址，先将文件对象存起来，等 submit 按钮点击事件触发的时候再一起提交到请求地址里面。

直接上代码

import React from 'react';
import { Form, Button, Upload, message } from 'antd';
const app = (props) => {
	//限制文件类型和大小
	const beforeUpload = (file) => {
		const fileName = file.name;
		//因为会有example.test.zip文件形式存在，所以要用lastIndexOf
		const fileType = fileName.substring(fileName.lastIndexOf('.'));
		if (fileType !== '.zip') {
			message.error('请上传zip文件');
		}
		const isLt100M = file.size / 1024 / 1024 < 100;
		if (!isLt100M) {
			message.error('文件大小需小于 100MB!');
		}
		return fileType === '.zip' && isLt100M;
	};
	const normFile = (e) => {
		console.log('Upload event:', e);
		return e.file; //返回文件
	};
	const onFinish = (values) => {
		//含文件的数据提交要用到formdata
		const formData = new FormData();
		let payload = new Map();
		payload = [
			['File', values.uploadModel.originFileObj], //文件
			['name', values.name],
			['age', values.age],
		];
		//用append方法插入到formdata里面
		for (let [key, value] of payload) {
			formData.append(key, value);
		}
	};
	const [form] = Form.useForm();
	return (
		<div>
			<Form form={form} onFinish={onFinish}>
				<Form.Item
					name="uploadModel"
					// getValueFromEvent 设置如何将 event 的值转换成字段值
					getValueFromEvent={normFile}
					label="上传文件"
				>
					<Upload.Dragger beforeUpload={beforeUpload}>
						<p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
					</Upload.Dragger>
				</Form.Item>
				{/* 还有若干Form.Item */}
				<Form.Item>
					<Button type="primary" htmlType="submit">
						提交
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
};
export default app;

file.type 和 file.name

项目中我开发的时候用file.type='application/zip'来判断是否是 zip 文件，但是同事的电脑上却没有效果，于是我想到了是操作系统的问题，于是查了一下，确实如此。 windows 系统中的浏览器（支持 html5 的），不能用 file.type 来判断文件类型，mac 可以。所以要兼容两种操作系统的浏览器时，要通过 file.name 获取后缀名来判断。

const beforeUpload = (file) => {
	const fileName = file.name;
	const fileType = fileName.substring(fileName.lastIndexOf('.'));
	if (fileType !== '.zip') {
		message.error('请上传zip文件');
	}
	return false; //false 为阻断上传事件
};

Donate