antd中Upload组件自定义上传文件

我的需求是，后端2个接口都需要这个文件的url，但是上传操作只能执行一次，那么如何做呢？

首先这个上传组件

<Uploadaction={`${apiConfig?.prefix ?? '/'}${apiConfig.url}`}data={getDataFn}headers={{Authorization: `Bearer ${getToken()}` }}onChange={handleUploadChange}fileList={fileLists}beforeUpload={file => checkFileType(file, mimeTypes)}showUploadList={loading}name="file">

它有一个beforeUpload属性，上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传

上传时候，在beforeUpload方法里面，先把我们的文件给存起来

/*** description 文件上传前判断文件类型*/const checkFileType = (file, types = []) => {currentUpload.current = [file]; // 存到ref中if (types.length === 0) {return true;}/** 判断文件类型是否允许上传，比较类型不区分大小写 */const type = types.map(item => item.toLowerCase());const nameType = file.name.split('.').pop().toLowerCase();if (type.includes(nameType)) {setLoading(true);return true;}notification.error({message: `文件上传只支持${types.join(',')}类型`,});return false;};

当我们用第2个接口的时候

const handleUpload = () => {const formData = new FormData();currentUpload.current.forEach(file => {//append主要是添加参数formData.append('file', file);formData.append('method', 'importPartyInfos');formData.append('params', '{}');});reqwest({url: '',method: 'post',processData: false,data: formData,headers: {Authorization: `Bearer ${getToken()}`,},success: res => {},error: () => {message.error('upload failed.');},});};

ok了，如果有不懂的可以私信我，我封装了一个专门自定义上传的组件