angular कोणीय में फ़ाइल अपलोड करें?




file-upload angular2-http (8)

मुझे पता है कि यह एक सामान्य सवाल है लेकिन मैं कोणीय 2 में एक फाइल अपलोड करने में विफल रहा हूं। मैंने कोशिश की है

1) http://valor-software.com/ng2-file-upload/ और

2) http://ng2-uploader.com/home

...परंतु विफल हो गया। क्या किसी ने कोणीय में एक फाइल अपलोड की है? आपने किस विधि का उपयोग किया? ऐसा कैसे करें? यदि कोई नमूना कोड या डेमो लिंक प्रदान किया गया है तो इसकी सराहना की जाएगी।


मैंने संदर्भ का उपयोग कर फ़ाइल अपलोड की है। इस तरह फ़ाइल अपलोड करने के लिए कोई पैकेज आवश्यक नहीं है।

// कोड को .ts फ़ाइल में लिखा जाना है

@ViewChild("fileInput") fileInput;

addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
  let fileToUpload = fi.files[0];
    this.admin.addQuestionApi(fileToUpload)
      .subscribe(
        success => {
          this.loading = false;
          this.flashMessagesService.show('Uploaded successfully', {
            classes: ['alert', 'alert-success'],
            timeout: 1000,
          });
        },
        error => {
          this.loading = false;
          if(error.statusCode==401) this.router.navigate(['']);
          else
            this.flashMessagesService.show(error.message, {
              classes: ['alert', 'alert-danger'],
              timeout: 1000,
            });
        });
  }

}

// कोड service.ts फ़ाइल में लिखा जाना है

addQuestionApi(fileToUpload: any){
var headers = this.getHeadersForMultipart();
let input = new FormData();
input.append("file", fileToUpload);

return this.http.post(this.baseUrl+'addQuestions', input, {headers:headers})
      .map(response => response.json())
      .catch(this.errorHandler);

}

// कोड एचटीएमएल में लिखा जाना है

<input type="file" #fileInput>

यह सरल समाधान मेरे लिए काम करता है: file-upload.component.html

<div>
  <input type="file" #fileInput placeholder="Upload file..." />
  <button type="button" (click)="upload()">Upload</button>
</div>

और फिर XMLHttpRequest के साथ सीधे घटक में अपलोड करें।

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {

  @ViewChild('fileInput') fileInput;

  constructor() { }

  ngOnInit() {
  }

  private upload() {
    const fileBrowser = this.fileInput.nativeElement;
    if (fileBrowser.files && fileBrowser.files[0]) {
      const formData = new FormData();
      formData.append('files', fileBrowser.files[0]);
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/Data/UploadFiles', true);
      xhr.onload = function () {
        if (this['status'] === 200) {
            const responseText = this['responseText'];
            const files = JSON.parse(responseText);
            //todo: emit event
        } else {
          //todo: error handling
        }
      };
      xhr.send(formData);
    }
  }

}

यदि आप डॉटनेट कोर का उपयोग कर रहे हैं, तो पैरामीटर नाम फ़ील्ड नाम से मेल खाना चाहिए। इस मामले में फाइलें:

[HttpPost("[action]")]
public async Task<IList<FileDto>> UploadFiles(List<IFormFile> files)
{
  return await _binaryService.UploadFilesAsync(files);
}

यह उत्तर http://blog.teamtreehouse.com/uploading-files-ajax चोरी है

संपादित करें : अपलोड करने के बाद, आपको फ़ाइल अपलोड को साफ़ करना होगा ताकि उपयोगकर्ता एक नई फ़ाइल का चयन कर सके। और XMLHttpRequest का उपयोग करने के बजाय, शायद fetch का उपयोग करना बेहतर है:

private addFileInput() {
    const fileInputParentNative = this.fileInputParent.nativeElement;
    const oldFileInput = fileInputParentNative.querySelector('input');
    const newFileInput = document.createElement('input');
    newFileInput.type = 'file';
    newFileInput.multiple = true;
    newFileInput.name = 'fileInput';
    const uploadfiles = this.uploadFiles.bind(this);
    newFileInput.onchange = uploadfiles;
    oldFileInput.parentNode.replaceChild(newFileInput, oldFileInput);
  }

  private uploadFiles() {
    this.onUploadStarted.emit();
    const fileInputParentNative = this.fileInputParent.nativeElement;
    const fileInput = fileInputParentNative.querySelector('input');
    if (fileInput.files && fileInput.files.length > 0) {
      const formData = new FormData();
      for (let i = 0; i < fileInput.files.length; i++) {
        formData.append('files', fileInput.files[i]);
      }

      const onUploaded = this.onUploaded;
      const onError = this.onError;
      const addFileInput = this.addFileInput.bind(this);
      fetch('/api/Data/UploadFiles', {
        credentials: 'include',
        method: 'POST',
        body: formData,
      }).then((response: any) => {
        if (response.status !== 200) {
          const error = `An error occured. Status: ${response.status}`;
          throw new Error(error);
        }
        return response.json();
      }).then(files => {
        onUploaded.emit(files);
        addFileInput();
      }).catch((error) => {
        onError.emit(error);
      });
    }

https://github.com/yonexbat/cran/blob/master/cranangularclient/src/app/file-upload/file-upload.component.ts


मैंने सफलता के साथ प्राइमिंग से निम्नलिखित टूल का उपयोग किया है। मेरे पास प्राइम एनजी के साथ गेम में कोई त्वचा नहीं है, बस मेरे सुझाव पर गुज़र रही है।

http://www.primefaces.org/primeng/#/fileupload


कोणीय 2 फ़ाइल अपलोड करने के लिए अच्छा समर्थन प्रदान करता है। किसी भी तीसरे पक्ष पुस्तकालय की आवश्यकता नहीं है।

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

@ कोणीय / कोर ":" ~ 2.0.0 "और @ कोणीय / http:" ~ 2.0.0 "का उपयोग करना


उपरोक्त उत्तरों से मैं इसे कोणीय 5.x के साथ बना देता हूं

अपलोड अपलोड करने के लिए बस अपलोड करें uploadFile(url, file).subscribe()

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
import {Observable} from "rxjs";

@Injectable()
export class UploadService {

  constructor(private http: HttpClient) { }

  // file from event.target.files[0]
  uploadFile(url: string, file: File): Observable<HttpEvent<any>> {

    let formData = new FormData();
    formData.append('upload', file);

    let params = new HttpParams();

    const options = {
      params: params,
      reportProgress: true,
    };

    const req = new HttpRequest('POST', url, formData, options);
    return this.http.request(req);
  }
}

इसे अपने घटक में इस तरह प्रयोग करें

  // At the drag drop area
  // (drop)="onDropFile($event)"
  onDropFile(event: DragEvent) {
    event.preventDefault();
    this.uploadFile(event.dataTransfer.files);
  }

  // At the drag drop area
  // (dragover)="onDragOverFile($event)"
  onDragOverFile(event) {
    event.stopPropagation();
    event.preventDefault();
  }

  // At the file input element
  // (change)="selectFile($event)"
  selectFile(event) {
    this.uploadFile(event.target.files);
  }

  uploadFile(files: FileList) {
    if (files.length == 0) {
      console.log("No file selected!");
      return

    }
    let file: File = files[0];

    this.upload.uploadFile(this.appCfg.baseUrl + "/api/flash/upload", file)
      .subscribe(
        event => {
          if (event.type == HttpEventType.UploadProgress) {
            const percentDone = Math.round(100 * event.loaded / event.total);
            console.log(`File is ${percentDone}% loaded.`);
          } else if (event instanceof HttpResponse) {
            console.log('File is completely loaded!');
          }
        },
        (err) => {
          console.log("Upload Error:", err);
        }, () => {
          console.log("Upload done");
        }
      )
  }

यह उपयोगी ट्यूटोरियल है , ng2-file-upload का उपयोग करके फ़ाइल अपलोड करने के लिए और ng2-file-upload के बिना।

मेरे लिए यह बहुत मदद करता है।

फिलहाल, ट्यूटोरियल में कुछ गलतियां हैं:

1- क्लाइंट के पास एक सर्वर के रूप में एक ही अपलोड यूआरएल होना चाहिए, इसलिए app.component.ts लाइन बदलें

const URL = 'http://localhost:8000/api/upload';

सेवा मेरे

const URL = 'http://localhost:3000';

2- सर्वर 'टेक्स्ट / एचटीएमएल' के रूप में प्रतिक्रिया भेजता है, इसलिए app.component.ts बदल जाता है

.post(URL, formData).map((res:Response) => res.json()).subscribe(
  //map the success function and alert the response
  (success) => {
    alert(success._body);
  },
  (error) => alert(error))

सेवा मेरे

.post(URL, formData)  
.subscribe((success) => alert('success'), (error) => alert(error));

कोणीय 2+ में, सामग्री-प्रकार को खाली छोड़ना बहुत महत्वपूर्ण है। यदि आप 'सामग्री-प्रकार' को 'मल्टीपार्ट / फॉर्म-डेटा' पर सेट करते हैं तो अपलोड काम नहीं करेगा!

upload.component.html

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

upload.component.ts

export class UploadComponent implements OnInit {
    constructor(public http: Http) {}

    fileChange(event): void {
        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            const file = fileList[0];

            const formData = new FormData();
            formData.append('file', file, file.name);

            const headers = new Headers();
            // It is very important to leave the Content-Type empty
            // do not use headers.append('Content-Type', 'multipart/form-data');
            headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
            const options = new RequestOptions({headers: headers});

            this.http.post('https://api.mysite.com/uploadfile', formData, options)
                 .map(res => res.json())
                 .catch(error => Observable.throw(error))
                 .subscribe(
                     data => console.log('success'),
                     error => console.log(error)
                 );
        }
    }
}

चूंकि कोड नमूना थोड़ा पुराना है, मैंने सोचा कि मैं कोणीय 4.3 और नए (एआर) एचटीपी क्लाइंट एपीआई, @ कोणीय / सामान्य / http का उपयोग करके एक और हालिया दृष्टिकोण साझा करूंगा

export class FileUpload {

@ViewChild('selectedFile') selectedFileEl;

uploadFile() {
let params = new HttpParams();

let formData = new FormData();
formData.append('upload', this.selectedFileEl.nativeElement.files[0])

const options = {
    headers: new HttpHeaders().set('Authorization', this.loopBackAuth.accessTokenId),
    params: params,
    reportProgress: true,
    withCredentials: true,
}

this.http.post('http://localhost:3000/api/FileUploads/fileupload', formData, options)
.subscribe(
    data => {
        console.log("Subscribe data", data);
    },
    (err: HttpErrorResponse) => {
        console.log(err.message, JSON.parse(err.error).error.message);
    }
)
.add(() => this.uploadBtn.nativeElement.disabled = false);//teardown
}




angular2-http