Անցանց ֆայլերի մշակում Javascript/React-ում՝ օգտագործելով File API

Javascript-ը կարող է հիանալի միջոց լինել ծրագրակազմի բաշխման համար՝ առանց օգտագործողներին գործադիրներ տեղադրելու պահանջի: Մի մեծ առավելություն, որը հաճախ անտեսվում է, այն է, որ այն կարող է նաև կառավարել ֆայլերը ձեր տեղական մեքենայի վրա՝ օգտագործելով File API:

Քանի որ այն այնքան քիչ է օգտագործվում, կարող է դժվար լինել թեմայի վերաբերյալ լավ ռեսուրսներ գտնելը, ուստի այս հոդվածով մենք հավաքեցինք բոլոր հիմունքները և դրանք կանդրադառնանք քայլ առ քայլ:

Թույլ տալ օգտվողներին ընտրել ֆայլեր

Մեկ ֆայլ

Առաջին հիմնական բանը թույլ տալ օգտվողներին ընտրել ֆայլեր կամ թղթապանակներ որպես մուտքային տվյալներ: Դա կարելի է անել՝ օգտագործելով HTML մուտքագրման դաշտը:

<label htmlFor="input">Select a file:</label>
<input type="file" id="input" />

Բազմաթիվ ֆայլեր

Եթե ​​մենք ցանկանում ենք թույլ տալ օգտվողին վերբեռնել մի քանի տարրեր, պարզապես ավելացրեք «բազմաթիվ» հատկանիշը:

Թղթապանակներ

Եթե ​​մենք միայն ցանկանում ենք թույլ տալ օգտվողին ընտրել թղթապանակ, օրինակ՝ որպես աշխատանքային տարածք, մենք պետք է ավելացնենք webkitdirectory հատկանիշը:

<label htmlFor="input">Select a file:</label>
<input
  type="file"
  id="input"
  /* @ts-expect-error */
  webkitdirectory=""
/>

React/Typescript-ում թվում է, թե այն ճիշտ չի վարվում, հետևաբար՝ տողի վերևի մեկնաբանությունը և դրան վերագրված դատարկ տողը:

Ընտրված ֆայլերի առբերում

Այժմ, երբ օգտվողը կարող է ընտրել ֆայլեր կամ թղթապանակներ, մենք պետք է համոզվենք, որ մենք կարող ենք դրանք պահել փոփոխականների մեջ: Ամեն անգամ, երբ օգտատերը ընտրում է ֆայլեր կամ թղթապանակներ, այն մուտքագրման դաշտում առաջացնում է փոփոխության իրադարձություն: Մենք պետք է ավելացնենք իրադարձությունների լսող այս փոփոխության իրադարձության համար: React-ում դա արվում է onChange հատկանիշին ֆունկցիա վերագրելով:

<div>
  <label htmlFor="myfile">Select a file:</label>
  <input
    type="file"
    id="input"
    onChange={handleFileChange}
    /* @ts-expect-error */
    webkitdirectory=""
  />
</div>

Եվ հետո handleFileChange գործառույթում մենք կարող ենք մշակել իրադարձությունը:

const handleFileChange = (e: any) => {
  let files = e.target.files;
  console.log(files)
};

Մուտքագրելով ֆայլերը վահանակ՝ մենք կարող ենք տեսնել բոլոր ֆայլերը և թղթապանակի կառուցվածքը (webkitRelativePath):

Ֆայլերի պահպանում

Էջերը փոխելուց կամ զննարկիչը փակելուց հետո ֆայլերի ցանկը չկորցնելու համար ցուցակը կարող է պահվել բրաուզերի տեղական պահեստում: Սա ուղղակիորեն հնարավոր չէ անել, քանի որ տեղային պահոցն աջակցում է միայն տողերին, և ֆայլերի ցանկը պահվում է որպես FileList և ոչ որպես լռելյայն զանգված:

const handleFileChange = (e: any) => {
  const files = e.target.files;
  console.log(files);
  let fileArray = [];
  let file = {};

  for (let i = 0; i < files.length; i++) {
    file = {
      lastModified: files[i].lastModified,
      lastModifiedDate: files[i].lastModifiedDate,
      name: files[i].name,
      size: files[i].size,
      type: files[i].type,
      webkitRelativePath: files[i].webkitRelativePath,
    };
    fileArray.push(file);
  }
  localStorage.setItem("files", JSON.stringify(fileArray));
  console.log(JSON.stringify(fileArray));
};

Վերևի կոդը ավելացնում է մուտք դեպի սովորական զանգված ցուցակի յուրաքանչյուր ֆայլի համար, և այս զանգվածն այնուհետև փոխակերպվում է JSON-ի, որպեսզի թույլ տա այն պահել տեղական պահեստում:

Օգնության կարիք ունեմ?

Այցելեք մեզ upshift.be կայքում և թողեք մեզ հաղորդագրություն 👋