Upload-file-tools NPM

use upload-file

install

cnpm i upload-file-tools --save

文件上传组件

import React from 'react';
import { Collapse, Form, Button } from 'antd';
import UploadFile, { UploadProps } from 'upload-file-tools';

// 文件上传地址
const uploadUrl = '/upload';
// 文件访问路径
const imgPrefix = '/uploads';
const headers = {
	Authorization: 'Bearer e2cb546ec3494da79cb65d0078a5febd'
};

const pictures = '20230206/65eeecaa16af49c39a3b0ef9157bf1d0.png,20230206/9c3d0616a98d4eccbe68564b72ecd896.jpg';

const Demo = () => {
	const [form] = Form.useForm();

	/** 表单提交 */
	const handleClick = async () => {
		const info = await form.validateFields();
		/** 图片 */
		info.picture = info.picture ? info.picture?.fileList?.map((item: any) => item?.fileUrl)?.join(',') : '';
		/** 视频 */
		info.video = info.video ? info.video?.fileList?.map((item: any) => item?.fileUrl)?.join(',') : '';
		/** 文件 */
		info.file = info.file ? info.file?.fileList?.map((item: any) => item?.fileUrl)?.join(',') : '';
		console.log('提交信息', info, form.getFieldsValue());
	};

	const uploadImageProps: UploadProps = {
		multiple: true,
		uploadUrl,
		imgPrefix,
		max: 3,
		name: 'picture',
		label: '照片',
		labelCol: {
			span: 6
		},
		wrapperCol: {
			span: 14
		},
		url: pictures,
		required: true,
		fileType: 'picture',
		headers
	};

	const uploadVideoProps: UploadProps = {
		uploadUrl,
		imgPrefix,
		max: 3,
		name: 'video',
		label: '视频',
		labelCol: {
			span: 6
		},
		wrapperCol: {
			span: 14
		},
		fileType: 'video',
		required: false,
		headers
	};

	const uploadFileProps: UploadProps = {
		uploadUrl,
		imgPrefix,
		max: 3,
		name: 'file',
		label: '文件',
		labelCol: {
			span: 6
		},
		wrapperCol: {
			span: 14
		},
		url: '20230224/1b32a9249c614d1fbfea2fb4c33266f6.xlsx',
		fileType: 'file',
		checkUnit: ['docx', 'doc', 'pdf', 'ppt', 'pptx', 'xls', 'xlsx'],
		required: true,
		headers
	};

	return (
		<div style={{ width: '50%', padding: 20 }}>
			<Form form={form}>
				<UploadFile {...uploadImageProps} />
				<UploadFile {...uploadVideoProps} />
				<UploadFile {...uploadFileProps} />
			</Form>
			<Button type="primary" onClick={() => handleClick()}>
				提交
			</Button>
		</div>
	);
};
export default Demo;

global.less 添加样式文件

@import '~antd/es/upload/style/index.less';

0.0.7 版本

格式校验更新，参数注释完善

0.0.9 版本

新增图片裁切

1.0.3 版本

1，新增参数 labelType:label 与组件排列方式 labelWidth:label 宽度 isFormItem:上传组件是否被 formItem 包裹 getResponseByUrl:通过文件地址 url（单个），回显出接口返回数据格式 getUrlByResponse:通过接口返回数据，解析出文件 url errorMessageKey:返回数据错误信息属性名默认 message 2，表单提交数据修改 fileList 中每一项包含 fileUrl,为根据上传返回数据解析完的文件地址