Файл байршуулагч

Материал UI-д файл илгээхийн алдааг засах арга

Материал UI (MUI) нь React аппликейшнүүдийн интерфейсийг хөгжүүлэхэд зориулагдсан алдартай номын сан юм. Гэсэн хэдий ч файл илгээх функцийг хэрэгжүүлэхэд олон нийтлэг алдаа, асуудлаас үүдэлтэй тулгардаг. Энэ нийтлэлд Материал UI ашиглан файл илгээхэд тулгардаг нийтлэг алдаанууд болон хувийн шийдлүүдийг танилцуулах болно.

1. Файл сонгосны дараа алдааны мессеж харагдаж байна

React Hook Form-тай хамтран ажиллаж байгаа тохиолдолд файл сонгосны дараа формын утгууд шинэчлэгдэхгүй, баталгаажуулах алдаанууд үлддэг.

Шийдэл: 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. Илгээх товчлуур хариу өгөхгүй

Шийдэл: Button компонентод component="label" -ыг зааж өгнө үү.

<Button variant="contained" component="label">
  Файл сонгоно уу
  <input type="file" hidden onChange={handleFileChange} />
</Button>

3. accept атрибутыг үл тоомсорлох

Шийдэл: Хүндэт input элемент ашиглах эсвэл атрибутуудыг нь тусгайлаж өгнө үү.

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

4. Файлын хэмжээ болон өргөтгөл баталгаажуулах

Шийдэл: 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('Файлын хэмжээ хэтэрсэн байна.');
    return;
  }

  if (!allowedExtensions.includes(fileExtension)) {
    alert('Зөвшөөрөгдсөн файл форматын бус байна.');
    return;
  }

  // Файл шаардлагыг хангаж байвал үйлдлийг гүйцэтгэнэ
};

5. Алдааг засах шалгах жагсаалт

• ✔️ MuiFileInput ашиглахад setValue -ыг ашиглан формын утгуудыг шинэчилсэн эсэх
• ✔️ Button -д component="label" -ыг зааж өгсөн эсэх
• ✔️ input элементын accept атрибут зөв ажиллаж байгаа эсэх
• ✔️ Файлын хэмжээ болон өргөтгөл баталгаажуулалтыг хэрэгжүүлсэн эсэх
• ✔️ Алдааны мессежийг хэрэглэгчид ойлгомжтойгоор харуулж байгаа эсэх

6. Файл илгээхэд тус нэмэр болох хэрэгслүүдийг танилцуулах

Файл илгээх функцийг тест хийх, туршилтад хэрэглэхэд тохиромжтой хэрэгслүүдийн нэг нь UploadF юм.

• ПК болон ухаалаг утасанд тохиромжтой
• Дрэг ба дроп дэмжинэ
• Бүтэн үнэгүй

UploadF-ыг туршаад үзэх

---

Материал UI ашиглан файл илгээх функцийн имплементаци хийж байхдаа янз бүрийн алдаанууд учирч болзошгүй боловч, энэ нийтлэлийн агуулгыг үндэс болгож зөв зохистой ажиллавал хялбархан хөгжүүлэлт хийх боломжтой болно.

Нүүр хуудас   Тусламж   Холбоо барих   🌐Language