پاسخ داده شد
0
0

فرض کنید فرمی برای آپلود یک فایل داریم. چطور پیشرفت آپلود را با یک progress bar نشان دهیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

برای نمایش progress bar می توانید از کامپوننت LinearProgress استفاده کنید. ابتدا ایمپورتش کنید:

import LinearProgress from "@material-ui/core/LinearProgress";

سپس در هر قسمتی از صفحه که خواستید آن را قرار دهید:

<LinearProgress variant="determinate" value={uploadProgress} />

* uploadProgress متغیر state ای است که برای نشان دادن درصد پیشرفت progress bar استفاده می کند و باید تعریفش کنید.

حالا باید در axios و در متد onUploadProgress ، uploadProgress را مقدار دهی کنید:

axios
        .post("http://localhost/posts/uploadFile", formData, { c
        ,
        onUploadProgress: (progressEvent) => {
          const progress = (progressEvent.loaded / progressEvent.total) * 100;
          setUploadProgress(progress);
        },
        onDownloadProgress: (progressEvent) => {
          const progress = 50 + (progressEvent.loaded / progressEvent.total) * 100;
          console.log(progress);
          setUploadProgress(progress);
        },
        })

 

  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت