ビデオアップロードの進行状況の実装

ビデオまたはファイルの容量が大きい場合は、アップロードが完了したかどうかを確認できません.アップロードプロセスが実装されました.

フォームまたは入力イベント

そこでいいと思ったが、なかった.

axios

axios.postの実施部に入り、ビデオアップロードの流れを実現できるコードを発見した.

post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;

axios.postは、上記のパラメータを有する.URLはアップロードアドレス、データはアップロードするFormData、configは何ですが、コードを見てみました

export interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  baseURL?: string;
  transformRequest?: AxiosTransformer | AxiosTransformer[];
  transformResponse?: AxiosTransformer | AxiosTransformer[];
  headers?: any;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: any;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  decompress?: boolean;
}

発見onUploadProgress!
検索後、onUploadProgressのパラメータはprogressEvent:anyであり、propertyのloadタイプとtotalタイプを有することが分かった.loadはアップロードサイズ、totalはファイルの総サイズであるべきです.

const onUploadProgress = (event: any) => setProgress((event.loaded * 100) / event.total);

これでコードを作ればいいです.const [progress, setProgress] = useState(0);でProgressの状態を管理すればいいです.