Загрузка файла в Angular 4

Ответ 1

Загрузка изображений в Angular 4 без плагина Это статья, которая, возможно, стоит попробовать. Загрузить изображения в Angular 4 без плагина

Он подчеркивает эти моменты:

• Использование метода .request() вместо .post
• Отправка формыДата прямо в тело.
• Настройка элементов заголовка и построение нового RequestOptions объект.
• Чтобы отправить formData с содержимым изображения, вы должны удалить заголовок Content-Type.

Ответ 2

Для общего решения необходимо создать новый модуль, например shared module. Вам просто нужно создать общий модуль, например это и импортировать общий модуль в app.module файл

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({
     imports: [ FileUploadModule],  
     declarations: [ ],
     exports :[ FileSelectDirective, FileDropDirective, FormsModule,
               FileUploadModule],
})
export class SharedModule { }

просто импортируйте share.module в свой app.module, как это.

import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';

@NgModule({
    imports: [SharedModule],
    declarations: [],
    exports :[],
   })
export class AppModule { }

взгляните на ленивую загрузку в angular 4

Ответ 3

Я не думаю, что нам нужны дополнительные библиотеки

onFileChange(event){
   let files = event.target.files; 
   this.saveFiles(files);
    }
@HostListener('dragover', ['$event']) onDragOver(event) {
    this.dragAreaClass = "droparea";
    event.preventDefault();
}
@HostListener('dragenter', ['$event']) onDragEnter(event) {
    this.dragAreaClass = "droparea";
    event.preventDefault();
}
@HostListener('dragend', ['$event']) onDragEnd(event) {
    this.dragAreaClass = "dragarea";
    event.preventDefault();
}
@HostListener('dragleave', ['$event']) onDragLeave(event) {
    this.dragAreaClass = "dragarea";
    event.preventDefault();
}
@HostListener('drop', ['$event']) onDrop(event) {   
    this.dragAreaClass = "dragarea";           
    event.preventDefault();
    event.stopPropagation();
    var files = event.dataTransfer.files;
    this.saveFiles(files);
}

И теперь мы готовы загрузить файлы с перетаскиванием, а также нажав кнопку ссылки и загрузить дополнительные данные с файлами.

Смотрите полную статью здесь Angular 4 загружать файлы с данными и веб-api путем перетаскивания

Ответ 4

Для этого вам не нужна внешняя библиотека, проверьте ниже пример кода

@Component({
    selector: 'app-root',
    template: '<div>'
        + '<input type="file" (change)="upload($event)">'
        + '</div>',
})

export class AppComponent {

    constructor(private _service: commonService) { }

    upload(event: any) {
        let files = event.target.files;
        let fData: FormData = new FormData;

        for (var i = 0; i < files.length; i++) {
            fData.append("file[]", files[i]);
        }
        var _data = {
            filename: 'Sample File',
            id: '0001'
        }

        fData.append("data", JSON.stringify(_data));

        this._service.uploadFile(fData).subscribe(
            response => this.handleResponse(response),
            error => this.handleError(error)
        )
    }
    handleResponse(response: any) {
        console.log(response);
    }
    handleError(error: string) {
        console.log(error);
    }
}

Дополнительная информация

Ответ 5

HTML:

<input type="file" (change)="onFileChange($event)" id="file">

TS:

@Component({
  ......
})

export class myComponent{

    form: FormGroup;

    contructor(fb: FormGroup){
       form: fb.group({file: null});
    }

 //fVals comes from HTML Form -> (ngSubmit)="postImage(form.value)" 
    postImage(fVals){
      let body = new FormData();
      body.append('file', formValues.file);

      let httpRequest = httpclient.post(url, body);
      httpRequest.subscribe((response) =>{
         //..... handle response here
      },(error) => {
         //.....handle errors here
      });
   }

   onFileChange(event) {
     if(event.target.files.length > 0) {
       let file = event.target.files[0];
       this.form.get('file').setValue(file);
     }
   }
}