Pemuat Naik Fail

Cara Menangani Ralat Muat Naik Fail dengan Material UI

Material UI (MUI) adalah perpustakaan popular yang digunakan untuk memudahkan pembangunan UI dalam aplikasi React. Namun, apabila mengimplementasikan fungsi muat naik fail, anda mungkin menghadapi beberapa ralat atau masalah biasa. Artikel ini menerangkan ralat biasa semasa memuat naik fail menggunakan Material UI dan cara menanganinya.

1. Mesej ralat masih muncul selepas memilih fail

Jika menggunakan React Hook Form, selepas memilih fail, nilai borang mungkin tidak dikemas kini, dan ralat pengesahan mungkin masih ada.

Cara Menangani: Tetapkan nilai secara eksplisit menggunakan fungsi setValue.

import { useForm } from 'react-hook-form';

const { register, setValue, handleSubmit, formState: { errors } } = useForm();

const handleFileChange = (event) => {
  const file = event.target.files[0];
  setValue('uploadFile', file);
};

2. Butang muat naik tidak berfungsi

Cara Menangani: Spesifikasikan component="label" pada komponen Button.

<Button variant="contained" component="label">
  Pilih Fail
  <input type="file" hidden onChange={handleFileChange} />
</Button>

3. Atribut accept diabaikan

Cara Menangani: Gunakan elemen input asli atau pastikan atribut berfungsi dengan betul.

<input type="file" accept=".jpg,.png" onChange={handleFileChange} />

4. Pengesahan saiz fail dan sambungan

Cara Menangani: Tambahkan pengesahan dengan JavaScript.

const handleFileChange = (event) => {
  const file = event.target.files[0];
  const maxSize = 2 * 1024 * 1024; // 2MB
  const allowedExtensions = ['jpg', 'png'];
  const fileExtension = file.name.split('.').pop().toLowerCase();

  if (file.size > maxSize) {
    alert('Saiz fail terlalu besar.');
    return;
  }

  if (!allowedExtensions.includes(fileExtension)) {
    alert('Format fail tidak dibenarkan.');
    return;
  }

  // Proses jika fail memenuhi syarat
};

5. Senarai Semak Cara Menangani Ralat

• ✔️ Adakah anda mengemas kini nilai borang menggunakan setValue semasa menggunakan MuiFileInput?
• ✔️ Adakah anda telah spesifikasikan component="label" pada Button?
• ✔️ Adakah atribut accept pada elemen input berfungsi dengan betul?
• ✔️ Adakah anda melaksanakan pengesahan saiz fail dan sambungan?
• ✔️ Adakah anda memaparkan mesej ralat dengan jelas kepada pengguna?

6. Pengenalan Alat Berguna untuk Muat Naik Fail

Untuk menguji atau mendemonstrasikan fungsi muat naik fail, terdapat alat berguna seperti UploadF.

• Sesuai untuk PC dan telefon pintar
• Sokongan seret dan lepas
• Percuma sepenuhnya

Cuba UploadF

---

Semasa melaksanakan fungsi muat naik fail menggunakan Material UI, pelbagai ralat mungkin timbul, tetapi jika anda merujuk kepada kandungan artikel ini dan menangani dengan betul, anda boleh meneruskan pembangunan dengan lancar.

Laman Utama   Bantuan   Hubungi   🏳️Language