Bestand uploaden in hoek?

Ik weet dat dit een zeer algemene vraag is, maar ik kan geen bestand uploaden in Angular 2.
Ik heb geprobeerd

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

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

…maar mislukt. Heeft iemand een bestand geüpload in Angular? Welke methode heb je gebruikt? Hoe dat te doen? Als er een voorbeeldcode of demolink wordt verstrekt, wordt deze zeer op prijs gesteld.

Antwoord 1, autoriteit 100%

Angular 2 biedt goede ondersteuning voor het uploaden van bestanden. Er is geen bibliotheek van derden vereist.

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

met @angular/core”: “~2.0.0” en @angular/http: “~2.0.0”

Antwoord 2, autoriteit 21%

Van de bovenstaande antwoorden bouw ik dit met Angular 5.x

Bel gewoon uploadFile(url, file).subscribe()aan om een upload te starten

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

Gebruik het zo in je component

 // 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");
        }
      )
  }

Antwoord 3, autoriteit 7%

Met dank aan @Eswar. Deze code werkte perfect voor mij. Ik wil bepaalde dingen aan de oplossing toevoegen:

Ik kreeg een foutmelding: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart

Om deze fout op te lossen, moet u het “Content-Type” “multipart/form-data” verwijderen. Het heeft mijn probleem opgelost.

Antwoord 4, autoriteit 5%

Omdat het codevoorbeeld een beetje verouderd is, dacht ik dat ik een recentere aanpak zou delen, met behulp van Angular 4.3 en de nieuwe(re) HttpClient API, @angular/common/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
}

Antwoord 5, autoriteit 4%

In Angular 2+ is het erg belangrijkom het Content-Typeleeg te laten. Als je het ‘Content-Type’ instelt op ‘multipart/form-data’ zal de upload niet werken!

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

Antwoord 6, autoriteit 2%

Ik heb de volgende tool van primen met succes gebruikt. Ik heb geen huid in het spel met primeNg, ik geef alleen mijn suggestie door.

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

Antwoord 7, autoriteit 2%

Deze eenvoudige oplossing werkte voor mij: file-upload.component.html

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

En doe vervolgens de upload in de component rechtstreeks met 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);
    }
  }
}

Als u dotnet core gebruikt, moet de parameternaam overeenkomen met de from-veldnaam. bestanden in dit geval:

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

Dit antwoord is een plagiaat van http://blog.teamtreehouse.com/uploading-files- ajax

Bewerken:
Na het uploaden moet u de bestand-upload wissen zodat de gebruiker een nieuw bestand kan selecteren. En in plaats van xmlhttprequest te gebruiken, is het misschien beter om fetch te gebruiken:

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

Antwoord 8

Dit is handige tutorial , hoe Upload bestand met behulp van de NG2-bestand-upload en zonder NG2-FILE-UPLOAD.

Voor mij helpt het veel.

Op dit moment bevat tutorial een paar fouten:

1- Client moet dezelfde upload-URL als een server hebben,
Dus in app.component.tsLijn wijzigen

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

Naar

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

2- Server Stuur respons als ‘Tekst / HTML’, dus in app.component.tsWijzigen

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

Naar

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

Antwoord 9

om afbeelding te uploaden met formuliervelden

SaveFileWithData(article: ArticleModel,picture:File): Observable<ArticleModel> 
{
    let headers = new Headers();
    // headers.append('Content-Type', 'multipart/form-data');
    // headers.append('Accept', 'application/json');
let requestoptions = new RequestOptions({
  method: RequestMethod.Post,
  headers:headers
    });
let formData: FormData = new FormData();
if (picture != null || picture != undefined) {
  formData.append('files', picture, picture.name);
}
 formData.append("article",JSON.stringify(article));
return this.http.post("url",formData,requestoptions)
  .map((response: Response) => response.json() as ArticleModel);
} 

In mijn geval had ik .NET Web Api nodig in C#

// POST: api/Articles
[ResponseType(typeof(Article))]
public async Task<IHttpActionResult> PostArticle()
{
    Article article = null;
    try
    {
        HttpPostedFile postedFile = null;
        var httpRequest = HttpContext.Current.Request;
        if (httpRequest.Files.Count == 1)
        {
            postedFile = httpRequest.Files[0];
            var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
            postedFile.SaveAs(filePath);
        }
        var json = httpRequest.Form["article"];
         article = JsonConvert.DeserializeObject <Article>(json);
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
        article.CreatedDate = DateTime.Now;
        article.CreatedBy = "Abbas";
        db.articles.Add(article);
        await db.SaveChangesAsync();
    }
    catch (Exception ex)
    {
        int a = 0;
    }
    return CreatedAtRoute("DefaultApi", new { id = article.Id }, article);
}

Antwoord 10

Vandaag werd ik ng2-file-upload-pakket geïntegreerd in mijn hoekige 6 applicatie, het was vrij eenvoudig, vind de onderstaande code op hoog niveau.

importeer de module ng2-file-upload

app.module.ts

   import { FileUploadModule } from 'ng2-file-upload';
    ------
    ------
    imports:      [ FileUploadModule ],
    ------
    ------

Component ts bestandsimport FileUploader

app.component.ts

   import { FileUploader, FileLikeObject } from 'ng2-file-upload';
    ------
    ------
    const URL = 'http://localhost:3000/fileupload/';
    ------
    ------
     public uploader: FileUploader = new FileUploader({
        url: URL,
        disableMultipart : false,
        autoUpload: true,
        method: 'post',
        itemAlias: 'attachment'
        });
      public onFileSelected(event: EventEmitter<File[]>) {
        const file: File = event[0];
        console.log(file);
      }
    ------
    ------

Component HTML bestandstag toevoegen

app.component.html

<input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />

Online werken stackblitz-link:https://ng2-file -upload-voorbeeld.stackblitz.io

Voorbeeld van Stackblitz-code:https://stackblitz. com/edit/ng2-file-upload-example

Officiële documentatielink https://valor-software.com/ng2-file-upload /

Antwoord 11

Probeer de parameter optionsniet in te stellen

this.http.post(${this.apiEndPoint}, formData)

en zorg ervoor dat u de globalHeadersniet instelt in uw Http-fabriek.

Antwoord 12

In de eenvoudigste vorm werkt de volgende code in Angular 6/7

this.http.post("http://destinationurl.com/endpoint", fileFormData)
  .subscribe(response => {
    //handle response
  }, err => {
    //handle error
  });

Hier is de volledige implementatie

Antwoord 13

jspdf en Angular 8

Ik genereer een pdf en wil de pdf uploaden met POST-verzoek, dit is hoe ik dat doe (voor de duidelijkheid, ik verwijder een deel van de code en de servicelaag)

import * as jsPDF from 'jspdf';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient)
upload() {
    const pdf = new jsPDF()
    const blob = pdf.output('blob')
    const formData = new FormData()
    formData.append('file', blob)
    this.http.post('http://your-hostname/api/upload', formData).subscribe()
}

Antwoord 14

Ik heb een bestand geüpload met referentie. Er is geen pakket nodig om het bestand op deze manier te uploaden.

// code die in het .ts-bestand moet worden geschreven

@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,
            });
        });
  }

}

// code die in het service.ts-bestand moet worden geschreven

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

}

// code die in html moet worden geschreven

<input type="file" #fileInput>