Angular2

Question

के साथ FileReader कैसे काम करें कोणीय 2 के साथ फ़ाइल रीडर कैसे काम करें !!

जब Angular2 और टाइपप्रति साथ ग्राहक की ओर से एक फ़ाइल को पढ़ने,

मैं इस तरह से FileReader इस्तेमाल करने की कोशिश:

var fileReader = new FileReader(); 
fileReader.onload = function(e) { 
    console.log("run fileReader.onload"); 
    // ...... 
} 

लेकिन यह सब पर काम नहीं करता है, इस 'FileReader .onload 'समारोह कभी नहीं कहा जाएगा।

वास्तव में फ़ाइलों को पढ़ने के लिए एक समाधान की आवश्यकता है, कृपया मदद करें। धन्यवाद

एक ऑनलाइन आईडीई से इस जांच:

पूर्वावलोकन: https://angular2-butaixianran.c9.io/src/index.html

संपादक: https://ide.c9.io/butaixianran/angular2

Answer 1

सबसे पहले आप टेम्पलेट में इनपुट फार्म पर परिवर्तन घटना का लक्ष्य निर्दिष्ट करने के लिए है:

@View({ 
    template:` 
    <div> 
     Select file: 
     <input type="file" (change)="changeListener($event)"> 
    </div> 
    ` 
}) 

जैसा कि आप देख सकते हैं I changeListener() विधि (change) ईवेंट को बाध्य किया। वर्ग की मेरी कार्यान्वयन:

changeListener($event) : void { 
    this.readThis($event.target); 
    } 

    readThis(inputValue: any) : void { 
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onloadend = function(e){ 
     // you can perform an action with readed data here 
     console.log(myReader.result); 
    } 

    myReader.readAsText(file); 
    } 

श्रोता readThis विधि करने के लिए घटना से फ़ाइल गुजर रहा है। इसे पढ़ें अपने स्वयं के FileReader लागू किया है। आप फ़ंक्शन में घटक में फ़ाइल रीडर को भी परिभाषित कर सकते हैं। @ Haz111 से

Answer 2

जवाब पहले से ही काम करता है, लेकिन सिर्फ मामले में आप फ़ाइल पाठक एक पुन: प्रयोज्य घटक बनाना चाहते हैं, तो आप संभवतः इस या बेहतर इस्तेमाल कर सकते हैं: इस पर में सुधार:

inputfilereader.ts

import {Component, ElementRef, EventEmitter} from 'angular2/angular2'; 

@Component({ 
    selector: 'filereader', 
    templateUrl: './commons/inputfilereader/filereader.html', 
    styleUrls: ['./commons/inputfilereader/filereader.css'], 
    providers: [ElementRef], 
    events : ['complete'] 
}) 

export class InputFileReader { 
    complete :EventEmitter = new EventEmitter(); 

    constructor(public elementRef: ElementRef) { 
    } 

    resultSet:any; // dont need it 

    changeListener($event: any) { 
     var self = this; 
     var file:File = $event.target.files[0]; 
     var myReader:FileReader = new FileReader(); 
     myReader.readAsText(file); 
     var resultSet = []; 
     myReader.onloadend = function(e){ 
      // you can perform an action with data read here 
      // as an example i am just splitting strings by spaces 
      var columns = myReader.result.split(/\r\n|\r|\n/g); 

      for (var i = 0; i < columns.length; i++) { 
       resultSet.push(columns[i].split(' ')); 
      } 

      self.resultSet=resultSet; // probably dont need to do this atall 
      self.complete.next(self.resultSet); // pass along the data which would be used by the parent component 
     }; 
    } 
} 

filereader.html अन्य फ़ाइलों में

<input type="file" (change)="changeListener($event)" /> 

प्रयोग

anotherfile कहना dfs.ts

import {Component, ElementRef} from 'angular2/angular2'; 
import {InputFileReader} from '../../commons/inputfilereader/inputfilereader'; 

@Component({ 
    selector: 'dfs', 
    templateUrl: './components/dfs/dfs.html', 
    styleUrls: ['./components/dfs/dfs.css'], 
    providers: [ElementRef], 
    directives:[InputFileReader] 
}) 

export class DfsCmp { 
    constructor(public eleRef :ElementRef) {} 

    callSomeFunc(data):void { 
     console.log("I am being called with ", data); 
    } 
} 

dfs.html

<filereader (complete)="callSomeFunc($event)"></filereader> 

Answer 3

बस

fr.readAsText(event.files[0]); 

जोड़ने ऑनलोड परिभाषा के बाद कर सकते हैं। शून्य { वर फ़ाइल:: फ़ाइल = प्रदत्तमान

हो सकता है कि यह आपकी मदद कर सकता है, इस primeng

archivoUploadHandler(event) { 
    let contenido; 
    let fr = new FileReader(); 
    fr.onload = (e) => { 
    contenido = fr.result; 
    console.log(contenido); 
    }; 
    fr.readAsText(event.files[0]); 
}