2021-10-14 TIL
ビデオアップロードの進行状況の実装
ビデオまたはファイルの容量が大きい場合は、アップロードが完了したかどうかを確認できません.アップロードプロセスが実装されました.
フォームまたは入力イベント
そこでいいと思ったが、なかった.
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の状態を管理すればいいです.
Reference
この問題について(2021-10-14 TIL), 我々は、より多くの情報をここで見つけました
https://velog.io/@nomore12/2021-10-14-TIL
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
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;
}
const onUploadProgress = (event: any) => setProgress((event.loaded * 100) / event.total);
Reference
この問題について(2021-10-14 TIL), 我々は、より多くの情報をここで見つけました https://velog.io/@nomore12/2021-10-14-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol