use - Upload de arquivo em angular?




set page title in angular 6 (9)

Carreguei o arquivo usando referência. Nenhum pacote é necessário para fazer upload do arquivo dessa maneira.

// código a ser escrito no arquivo .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,
            });
        });
  }

}

// código a ser gravado no arquivo 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);

}

// código a ser escrito em html

<input type="file" #fileInput>

Sei que essa é uma pergunta muito geral, mas não consigo fazer upload de um arquivo no Angular 2. Tentei

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

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

...mas falhou. Alguém enviou um arquivo no Angular? Qual método você usou? Como fazer isso? Se qualquer código de amostra ou link de demonstração for fornecido, será realmente apreciado.


Como o exemplo de código está um pouco desatualizado, pensei em compartilhar uma abordagem mais recente, usando o Angular 4.3 e a nova (er) 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
}


Graças a @Eswar. Este código funcionou perfeitamente para mim. Quero adicionar algumas coisas à solução:

Eu estava recebendo erro: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart

Para resolver esse erro, você deve remover o "Tipo de conteúdo" "multipart / form-data". Isso resolveu meu problema.


Na forma mais simples, o código a seguir funciona no Angular 6/7

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

Aqui está a implementação completa


No Angular 2+, é muito importante deixar o Tipo de Conteúdo vazio. Se você definir o 'Tipo de conteúdo' como 'dados de várias partes / formulário', o upload não funcionará!

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

Tente não definir o parâmetro options

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

e verifique se você não está configurando os globalHeaders na sua fábrica Http.


Este é um tutorial útil , como fazer upload de arquivo usando o ng2-file-upload e SEM ng2-file-upload.

Para mim, isso ajuda muito.

No momento, o tutorial contém alguns erros:

1- O cliente deve ter o mesmo URL de upload que um servidor, portanto, em app.component.ts altere a linha

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

para

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

2- O servidor envia a resposta como 'text / html'; portanto, em app.component.ts altere

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

para

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

Para carregar imagem com campos de formulário

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

No meu caso, eu precisava do .NET Web Api em 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);
}




angular2-http