);
};
export default FileUpload;
```
### 封装为 react Hooks
**一个简单的封装，如有特殊需求，可以基于这个 hooks 进行二次修改**
```tsx
import { useState, useMemo, useCallback } from 'react';
import createUploader from 'enlarge-file-upload';
import axios from 'axios';
const useFileUploader = () => {
const [progress, setProgress] = useState(0);
const [speed, setSpeed] = useState('0 MB/s');
const uploadFunction = useCallback(
async ({ chunk, index, hash, cancelToken }) => {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('hash', hash);
formData.append('index', index);
await axios.post('http://localhost:3000/api/users', formData, {
cancelToken,
});
},
[]
);
const uploaderConfig = useMemo(
() => ({
chunkSize: 5 * 1024 * 1024, // 5MB
concurrency: 5,
maxRetries: 3,
// startOffset: 6, // Start upload from chunk index 6
// includeChunks:[1,6], // Only upload chunks with index 1 and 6, effective only if startOffset is 0 or empty
uploadFunction,
onProgress: progress => {
setProgress(progress);
},
onSuccess: () => {
console.log('Upload complete');
},
onSpeed: speed => {
setSpeed(speed);
},
}),
[uploadFunction]
);
const uploader = useMemo(
() => createUploader(uploaderConfig),
[uploaderConfig]
);
const uploadFile = useCallback(
file => {
uploader?.upload(file);
},
[uploader]
);
const pauseUpload = useCallback(() => {
uploader?.pause();
}, [uploader]);
const resumeUpload = useCallback(() => {
uploader?.resume();
}, [uploader]);
return {
progress,
speed,
uploadFile,
pauseUpload,
resumeUpload,
};
};
export default useFileUploader;
```
#### 使用封装好的 Hooks 示例
```tsx
import React from 'react';
import useFileUploader from './useFileUploader.tsx';
const FileUpload = () => {
const { progress, speed, uploadFile, pauseUpload, resumeUpload } =
useFileUploader();
const handleFileChange = event => {
const file = event.target.files[0];
uploadFile(file);
};
return (