我的需求是,后端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了,如果有不懂的可以私信我,我封装了一个专门自定义上传的组件