ফাইললিস্ট সহ প্রতিটি জন্য ব্যবহার করতে পারবেন না

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));

— টোলগাহান আলবায়রাক

এটা কোন অ্যারে না? এটি কি নোড.জেএস?

— কনসেক্স

@ কনেক্সেক্সো: না, field.photo.filesএকটি অবজেক্টটি প্রোটোটাইপড আছে FileList; ঠিক HTMLCollection, এটা নেই Array.prototypeতার প্রোটোটাইপ চেন।

— আমদান

সাধারণ for loopকাজ :)

— রেজা

Answer 1

এ FileListএকটি নয় Array, তবে এটি তার চুক্তির সাথে সামঞ্জস্য করে (রয়েছে lengthএবং সংখ্যাসূচক সূচকগুলি), তাই আমরা "orrowণ" Arrayপদ্ধতিগুলি নিতে পারি :

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

যেহেতু আপনি স্পষ্টতই ES6 ব্যবহার করছেন তাই আপনি 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/ জাভা স্ক্রিপ্ট / রেফারেন্স / অপারেটর / ডিস্ট্রাকচার_অ্যাসাইনমেন্ট

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

আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করে থাকেন তবে আপনি এই জাতীয় কিছু করতে পারেন: ফাইললিস্ট [] বা ফাইল [] ব্যবহারের সাথে একটি চলক 'ফাইলগুলির জন্য':

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