Tải lên tập tin trong góc?

Tôi biết đây là một câu hỏi chung chung nhưng tôi không tải lên được tệp trong Angular 2. Tôi đã thử

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

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

...nhưng không thành công. Có ai đã tải lên một tập tin trong Angular? Bạn đã sử dụng phương pháp nào? Làm thế nào để làm như vậy? Nếu bất kỳ mã mẫu hoặc liên kết demo được cung cấp, nó sẽ thực sự được đánh giá cao.

Angular 2 cung cấp hỗ trợ tốt để tải lên các tập tin. Không có thư viện bên thứ ba được yêu cầu.

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

sử dụng @ angular / core ":" ~ 2.0.0 "và @ angular / http:" ~ 2.0.0 "

Từ các câu trả lời ở trên, tôi xây dựng điều này với Angular 5.x

Chỉ cần gọi uploadFile(url, file).subscribe()để kích hoạt tải lên

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

Sử dụng nó như thế này trong thành phần của bạn

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

Cảm ơn @Eswar. Mã này làm việc hoàn hảo cho tôi. Tôi muốn thêm một số điều vào giải pháp:

Tôi đã nhận được lỗi: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart

Để giải quyết lỗi này, bạn nên xóa "Kiểu nhiều nội dung" "nhiều dữ liệu / biểu mẫu dữ liệu". Nó giải quyết vấn đề của tôi.

Vì mẫu mã hơi lỗi thời, tôi nghĩ rằng tôi sẽ chia sẻ một cách tiếp cận gần đây hơn, sử dụng Angular 4.3 và API httpClient (er) mới, @ 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
}

Trong Angular 2+, điều rất quan trọng là để trống Kiểu nội dung . Nếu bạn đặt 'Loại nội dung' thành 'nhiều dữ liệu / biểu mẫu dữ liệu' thì việc tải lên sẽ không hoạt động!

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

Tôi đã sử dụng các công cụ sau đây từ mồi với thành công. Tôi không có skin trong trò chơi với PrimeNg, chỉ cần chuyển qua gợi ý của tôi.

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

Giải pháp đơn giản này hiệu quả với tôi: file-upload.component.html

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

Và sau đó thực hiện tải lên trong thành phần trực tiếp với 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);
    }
  }

}

Nếu bạn đang sử dụng lõi dotnet, tên tham số phải khớp với tên từ trường. tập tin trong trường hợp này:

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

Câu trả lời này là một tai họa của http://blog.teamtreehouse.com/uploading-files-ajax

Chỉnh sửa : Sau khi tải lên, bạn phải xóa tệp tải lên để người dùng có thể chọn một tệp mới. Và thay vì sử dụng XMLHttpRequest, có lẽ tốt hơn là sử dụng tìm nạp:

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

Đây là hướng dẫn hữu ích , cách tải tệp lên bằng cách sử dụng tệp tải lên ng2 và KHÔNG CÓ ng2-tệp-tải lên.

Đối với tôi nó giúp rất nhiều.

Hiện tại, hướng dẫn có một vài lỗi:

1- Máy khách phải có cùng một url tải lên như một máy chủ, vì vậy trong app.component.tsdòng thay đổi

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

đến

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

2- Máy chủ gửi phản hồi dưới dạng 'văn bản / html', do đó, app.component.tsthay đổi

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

đến

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

Để tải lên hình ảnh với các trường mẫu

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

Trong trường hợp của tôi, tôi cần .NET Web Api trong 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);
}

Hôm nay tôi đã được tích hợp gói tải lên ng2 vào ứng dụng 6 góc của mình. Nó khá đơn giản, Vui lòng tìm mã cấp cao bên dưới.

nhập mô-đun ng2-file-upload

app.module.ts

    import { FileUploadModule } from 'ng2-file-upload';

    ------
    ------
    imports:      [ FileUploadModule ],
    ------
    ------

Thành phần nhập tệp ts 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);

      }
    ------
    ------

Thành phần HTML thêm thẻ tập tin

app.component.html

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

Liên kết stackblitz trực tuyến làm việc: https://ng2-file-upload-example.stackblitz.io

Ví dụ về mã Stackblitz: https://stackblitz.com/edit/ng2-file-upload-example

Liên kết tài liệu chính thức https://valor-software.com/ng2-file-upload/

Cố gắng không thiết lập optionstham số

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

và đảm bảo rằng bạn không thiết lập globalHeaderstrong nhà máy http của mình.

Ở dạng đơn giản nhất, đoạn mã sau hoạt động trong Angular 6/7

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

Đây là thực hiện đầy đủ

jspdf và góc 8

Tôi tạo pdf và muốn tải lên pdf với yêu cầu POST, đây là cách tôi làm (Để rõ ràng, tôi xóa một số mã và lớp dịch vụ)

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

Tôi đã tải lên tệp bằng cách sử dụng tài liệu tham khảo. Không có gói được yêu cầu để tải lên tập tin theo cách này.

// mã được ghi trong tệp .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,
            });
        });
  }

}

// mã được ghi trong tệp 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);

}

// mã được viết bằng html

<input type="file" #fileInput>