- 首页
- 其他开发
- 使用 Angular 5 中的文件上传保存 FormData
使用 Angular 5 中的文件上传保存 FormData
[英] Save FormData with File Upload in Angular 5
本文介绍了使用 Angular 5 中的文件上传保存 FormData的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将文件与 FormData 一起保存在 Angular 5 中.我可以获取单个文件，但不知道如何上传所有文件.我有三个图像文件和输入字段，尝试搜索示例.但仅适用于多个文件上传.我想从这个表单上传每个文件.
下面是我的代码:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';从@angular/common"导入{位置}；从@angular/router"导入{ActivatedRoute}；从'../../../shared/services/categories/category'导入{类别}；从'../../../shared/services/categories/categories.service'导入{ CategoriesService}；@成分({选择器:'app-add-category',templateUrl: './add-category.component.html',styleUrls: ['./add-category.component.scss'],封装:ViewEncapsulation.None})导出类 AddCategoryComponent 实现 OnInit {类别:类别=新类别()；文件上传:文件=空；构造函数(私人类别服务:类别服务，私人路线:ActivatedRoute，私人位置:位置) { }ngOnInit() {}返回():无效{this.location.back();}处理文件输入(文件:文件列表){控制台日志(文件)；}添加类别(){控制台日志(this.category)；this.categoriesService.createCategory(this.category).subscribe(() => this.goBack());}}
<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="类别名称">名称</label><input type="text" class="form-control" [(ngModel)]="category.category_name" name="category_name" id="category_name" placeholder="输入类别名称" required="">
<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="">
<br/><div class="form-group"><label for="类别说明">说明</label><textarea rows="3" [(ngModel)]="category.category_description" name="category_description" id="category_description" class="form-control" required=""></textarea>
<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>
<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>
<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>
<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 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="输入元标题" required="">
<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="输入元描述" required="">
<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="输入元关键字" required="">
<div class="form-group"><div class="row"><div class="col">精选:</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="">是
<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
<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">提交</button>
解决方案
这是我尝试过的，并且按预期工作:
handleCategoryBanner(files: FileList) {this.category.category_banner = '/categories/download/' + files[0].name;this.formData.append('category_banner', files[0], files[0].name);this.categoryContainersService.uploadFile(this.formData).subscribe(filename => console.log(files[0].name));}
<input type="file" (change)="handleCategoryBanner($event.target.files)" class="custom-file-input" id="category_banner" accept=".jpeg,.png,.jpg"><input type="hidden" name="category_banner" [(ngModel)]="category.category_banner"/><label class="custom-file-label" for="customFile">Banner</label>
I am trying to save files along with FormData in Angular 5.
I can get the single file, but have no idea how to get all the files uploaded.
I have three image files and input fields, tried searching examples. But only got for multiple file uploads.
I want to upload each and every single file from this form.
Below is my code :
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());
}
}
<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>
解决方案
This is what I tried and it worked as expected :
handleCategoryBanner(files: FileList) {
this.category.category_banner = '/categories/download/' + files[0].name;
this.formData.append('category_banner', files[0], files[0].name);
this.categoryContainersService.uploadFile(this.formData).subscribe(filename => console.log(files[0].name));
}
<div class="col-lg-12 text-center">
<input type="file" (change)="handleCategoryBanner($event.target.files)" class="custom-file-input" id="category_banner" accept=".jpeg,.png,.jpg">
<input type="hidden" name="category_banner" [(ngModel)]="category.category_banner" />
<label class="custom-file-label" for="customFile">Banner</label>
</div>
这篇关于使用 Angular 5 中的文件上传保存 FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
