Filelist के साथ forEach का उपयोग नहीं कर सकते

Question

मैं एक के माध्यम से पाश करने की कोशिश कर रहा हूँ Filelist:

console.log('field:', field.photo.files)
field.photo.files.forEach(file => {
   // looping code
})

जैसा कि आप देख सकते हैं field.photo.filesएक है Filelist:

कैसे ठीक से पाश के माध्यम से field.photo.files?

Comments

Array.prototype.forEach.call(field.photo.files, file => console.log(file));

— तोलघन अल्बारक

यह एक सरणी नहीं है? क्या यह नोड.जेएस है?

— 4

@connexo: नहीं, field.photo.filesएक ऑब्जेक्ट पर प्रोटोटाइप है FileList; ठीक उसी तरह HTMLCollection, जैसे Array.prototypeइसकी प्रोटोटाइप चेन में नहीं है ।

— आमदन

सरल for loopकार्य :)

— रेजा

Answer 1

A FileListएक नहीं है Array, लेकिन यह इसके अनुबंध ( lengthऔर संख्यात्मक सूचकांक) के अनुरूप है , इसलिए हम "उधार" Arrayतरीके ले सकते हैं :

Array.prototype.forEach.call(field.photo.files, function(file) { ... });

चूंकि आप स्पष्ट रूप से ईएस 6 का उपयोग कर रहे हैं, आप Arrayनई Array.fromविधि का उपयोग करके इसे उचित भी बना सकते हैं :

Array.from(field.photo.files).forEach(file => { ... });

Comments

अजीब बात है, मुझे यह मिलता है: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)साथ Array.from।

— एलेक्स

ठीक है, क्या आप सुनिश्चित हैं कि आपका चर है field.photo.files? मैं यह जाँच नहीं कर रहा था ...

— अमदन

@ आमदन मेरे सवाल में field.photo.filesवही है जो console.logदिखाता है।

— एलेक्स

@ अदमन दामन, यह एक टाइपो था। माफ़ करना।

— एलेक्स

आप प्रसार ऑपरेटर का उपयोग भी कर सकते हैं[...field.photo.files].map(file => {});

— हेनरीख कैंतुनी

Answer 2

आप इसके लिए एक सरल से पुनरावृति भी कर सकते हैं:

var files = field.photo.files;

for (var i = 0; i < files.length; i++) {
    console.log(files[i]);
}

Answer 3

ES6 में आप उपयोग कर सकते हैं:

[...field.photo.files].forEach(file => console.log(file));

संदर्भ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 4

Lodash पुस्तकालय एक है _forEach विधि है कि इस तरह सरणियों और वस्तुओं, FileList सहित के रूप में सभी संग्रह संस्थाओं, के माध्यम से छोरों:

_.forEach(field.photo.files,(file => {
     // looping code
})

Answer 5

निम्नलिखित कोड टाइपस्क्रिप्ट में है

     urls = new Array<string>();

     detectFiles(event) {
       const $image: any = document.querySelector('#file');
       Array.from($image.files).forEach((file: any) => {
       let reader = new FileReader();
       reader.onload = (e: any) => { this.urls.push(e.target.result); }
       reader.readAsDataURL(file);
      }
    }

Answer 6

यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आप कुछ इस तरह कर सकते हैं: एक चर 'फाइल' के लिए एक प्रकार के साथ FileList [] या फ़ाइल]]:

for(let file of files){
    console.log('line50 file', file);
  }