Speichern FormData-mit Datei-Upload-im Winkel 5
Ich versuche, Dateien zu speichern, zusammen mit FormData in Winkel-5.
Ich kann die einzelne Datei, aber haben keine Ahnung, wie man alle Dateien hochgeladen.
Ich habe drei Bild-Dateien und input-Felder, die versucht, auf der Suche Beispiele. Aber nur für mehrere Datei-uploads.
Ich hochladen will-jeder und jede einzelne Datei von dieser form.
Unten ist mein code :
JS:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Category } from '../../../shared/services/categories/category';
import { CategoriesService } from '../../../shared/services/categories/categories.service';
@Component({
selector: 'app-add-category',
templateUrl: './add-category.component.html',
styleUrls: ['./add-category.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AddCategoryComponent implements OnInit {
category: Category = new Category();
fileToUpload: File = null;
constructor(
private categoriesService: CategoriesService,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goBack(): void {
this.location.back();
}
handleFileInput(files: FileList) {
console.log(files);
}
addCategory() {
console.log(this.category);
this.categoriesService.createCategory(this.category).subscribe(() => this.goBack());
}
}
HTML:
<h3 class="box-title">Category</h3>
<form role="form" (ngSubmit)="addCategory()" #categoryForm="ngForm">
<div class="box-body">
<div class="row">
<div class="col-lg-6">
<label for="Category Name">Name</label>
<input type="text" class="form-control" [(ngModel)]="category.category_name" name="category_name" id="category_name" placeholder="Enter Category Name" required="">
</div>
<div class="col-lg-6">
<label for="Category Path">Path</label>
<input type="text" class="form-control" [(ngModel)]="category.category_path" name="category_path" id="category_path" required="">
</div>
</div>
</div>
<br/>
<div class="form-group">
<label for="Category Description">Description</label>
<textarea rows="3" [(ngModel)]="category.category_description" name="category_description" id="category_description" class="form-control" required=""></textarea>
</div>
<div class="col-lg-12 text-center">
<input type="file" [(ngModel)]="category.category_banner" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_banner" id="category_banner">
<label class="custom-file-label" for="customFile">Banner</label>
</div>
<br/>
<div class="form-group">
<label for="Category Banner Code">Banner Code</label>
<textarea rows="3" [(ngModel)]="category.category_banner_code" name="category_banner_code" id="category_banner_code" class="form-control" required=""></textarea>
</div>
<br/>
<div class="col-lg-12">
<input type="file" [(ngModel)]="category.category_image" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_image" id="category_image">
<label class="custom-file-label" for="customFile">Image</label>
</div>
<br/>
<div class="col-lg-12">
<input type="file" [(ngModel)]="category.category_icon" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_icon" id="category_icon">
<label class="custom-file-label" for="customFile">Icon</label>
</div>
<div class="form-group">
<label for="Category Meta Title">Meta Title</label>
<input type="text" [(ngModel)]="category.category_meta_title" class="form-control" name="category_meta_title" id="category_meta_title" placeholder="Enter Meta Title" required="">
</div>
<div class="form-group">
<label for="Category Meta Description">Meta Description</label>
<input type="text" [(ngModel)]="category.category_meta_decription" class="form-control" id="category_meta_description" name="category_meta_description" placeholder="Enter Meta Description" required="">
</div>
<div class="form-group">
<label for="Category Meta Keyword">Meta Keyword</label>
<input type="text" [(ngModel)]="category.category_meta_keyword" class="form-control" id="category_meta_keyword" name="category_meta_keyword" placeholder="Enter Meta Keyword" required="">
</div>
<div class="form-group">
<div class="row">
<div class="col">Featured :</div>
<div class="col">
<label class="radio-inline" for="Category Featured">
<input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="1" required="">Yes
</label>
</div>
<div class="col">
<label class="radio-inline" for="Category Featured">
<input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="0" required="">No
</label>
</div>
</div>
</div>
<input type="hidden" [(ngModel)]="category.category_status" name="category_status" id="category_status" value="1">
<div class="box-footer col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte vor kurzem ein ähnliches Problem. Dies kann gelöst werden, indem die content-Typ-header wie die null in den Eckigen code.
Die Befestigung der code-snippet Angular5 und spring boot-backend.
Dies ist, was ich versucht und es funktionierte wie erwartet :
JS:
HTML:
Hier ist, wie ich handle mehrere Dateien aus einer einzigen Datei-Eingang.
Meine Komponente sammelt Daten aus dem Formular und erstellt ein Daten-Objekt, die nicht enthalten die Dateien. Es ruft dann diese service-Methode mit den Daten-Objekt und die Dateien, die sendet die Daten und die Dateien, die in einer mehrteiligen post.
So, um zwei Datei-Eingänge, Sie könnten dies tun:
Welche würde geben Sie drei Teile, die in Ihrer mehrteiligen post, eine für jeden Satz von Dateien, und eine für die Daten-Objekt.
code' handleFileInput(files: FileList) { this.fileToUpload = files.item(0); }'code
habe ich drei Bild-upload-buttons und ich möchte Ihnen in der post zusammen mit dem formData.files.item(0);
Im Beispiel, ich bin vorbei, die in zwei arrays von Dateien unter der Annahme, dass es zwei Eingänge. Wenn es drei Eingänge, Sie würde gehen drei arrays (oder drei einzelne Elemente). Der Grund, dass ich sende Ihnen separat in der POST ist, so dass Sie wissen, auf der server-Seite die Datei kam aus dem Eingang.setzen Sie einfach "multiple" - Attribut auf Ihre input-tag
jetzt indem Sie 2 oder mehr Dateien auf durchsuchen, erhalten Sie Objekt sollte Durchlaufen Sie auf, extrahieren Sie Bilder auf ihn.
so-->