Material UI (MUI) என்பது, React ஆப் பிளவுகளில் UI உருவாக்கத்தை திறமையாகவும் சில்லறையாகவும் செய்ய பயன்படும் பிரபலமான நூலகம். எனினும், கோப்புகளை பதிவேற்றும் செயல்பாட்டை செயல்படுத்தும் போது, சில பொது பிழைகள் மற்றும் சிக்கல்களுடன் சந்திக்க நேரிடும். இந்தக் கட்டுரையில், Material UI ஐப் பயன்படுத்தி கோப்புகளை பதிவேற்றும் போது நிகழும் பொது பிழைகள் மற்றும் அவற்றைக் கையாளும் முறைகளை விளக்குகின்றது.
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);
};கையாளும் வழி: Button கூறிற்கு component="label" ஐ குறிப்பிடவும்.
<Button variant="contained" component="label">
கோப்பை தேர்வு செய்க
<input type="file" hidden onChange={handleFileChange} />
</Button>accept பண்புக் கவனிக்கப்படவில்லைகையாளும் வழி: ஜென்ம விவகம் உள்ள input கூறுகளைப் பயன்படுத்துங்கள் அல்லது பண்புகள் முழுமையாக செயல்படுத்துங்க.
<input type="file" accept=".jpg,.png" onChange={handleFileChange} />கையாளும் வழி: 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;
}
// கோப்பு தேவைகளை பூர்த்தி செய்தால் செயலாற்றவும்
};MuiFileInput ஐப் பயன்படுத்தும்போது setValue மூலம் புரந்தானின் மதிப்புகளை புதுப்பிக்கிறதாButton க்கு component="label" ஐ குறிப்பிடுகிறதாinput கூறின் accept பண்பு சரியான முறையில் செயல்படுகிறதாகோப்பு பதிவேற்ற செயல்திறனை சோதிக்க மற்றும் தோற்றுவிக்க பயன்படும் கருவியாக, UploadF உள்ளது.
Material UI ஐப் பயன்படுத்தி கோப்பு பதிவேற்றக் கையாளும் செயல்பாட்டின் செயல்படுத்தும் போது, பல்வேறு பிழைகள் ஏற்படக்கூடியவை; எனினும், இந்தக் கட்டுரையின் உள்ளடக்கத்தினைப் பார்க்கி சரியாக கையாள வந்தால், சீரான முறையில் மேம்படுத்தல்களை முன்னெடுத்து வரலாம்.