新手上路，请多包涵

我是 Angular 的初学者，我想知道如何创建 Angular 5 文件上传部分，我正在尝试查找任何教程或文档，但我在任何地方都看不到任何东西。有什么想法吗？我尝试了 ng4-files 但它不适用于 Angular 5

原文由 core114 发布，翻译遵循 CC BY-SA 4.0 许可协议

angular typescript

阅读 605

2 个回答

得票最新

社区维基

发布于
2022-10-27

✓ 已被采纳

这是一个将文件上传到 api 的工作示例：

第 1 步：HTML 模板 (file-upload.component.html)

定义 file 类型的简单输入标签。在 (change) 事件中添加一个函数来处理选择文件。

 <div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

第 2 步：TypeScript 中的上传处理 (file-upload.component.ts)

为选定的文件定义一个默认变量。

 fileToUpload: File | null = null;

创建您在文件输入标签的 (change) 事件中使用的函数：

 handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

如果要处理多文件选择，则可以遍历此文件数组。

现在通过调用 file-upload.service 创建文件上传功能：

 uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

第 3 步：文件上传服务 (file-upload.service.ts)

通过 POST 方法上传文件，您应该使用 FormData ，因为这样您可以将文件添加到 http 请求。

 postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

所以，这是一个非常简单的工作示例，我每天都在工作中使用它。

原文由 Gregor Doroschenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-10-27

创建-profile.html

 <body>
  <h1 class="font-weight-bold" >Create Advertistment</h1>
  <hr />
  <form [formGroup]="form" (submit)="onSubmit()">
    <div>
      <label class="font-weight-bold">Insert Subject name</label>
      <br>
      <input formControlName="name" type="text" placeholder="Enter name..." />
    </div>
    <div>
      <br>
      <label class="font-weight-bold">Select the Advertistment</label>
      <br>
      <input (change)="onFileSelect($event)" type="file" />
    </div>
    <br>
    <!--<div *ngIf="imageData">
      <img [src]="imageData" [alt]="form.value.name" />
    </div>-->
    <div>

      <label class="font-weight-bold">Upload the Advertistment</label>
      <br>
      <button type="submit" class="btn btn-success" >Upload Advertistment</button>
    </div>
  </form>

  </body>

创建-profile.ts

 import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

import { Profile } from "../../models/Profile";
import { ProfileService } from "src/app/services/profile.service";

@Component({
  selector: "app-create-profile",
  templateUrl: "./create-profile.component.html",
  styleUrls: ["./create-profile.component.css"],
})
export class CreateProfileComponent implements OnInit {
  form: FormGroup;
  profile: Profile;
  imageData: string;

  constructor(private profileService: ProfileService) {}

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl(null),
      image: new FormControl(null),
    });
  }

  onFileSelect(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.patchValue({ image: file });
    const allowedMimeTypes = ["image/png", "image/jpeg", "image/jpg"];
    if (file && allowedMimeTypes.includes(file.type)) {
      const reader = new FileReader();
      reader.onload = () => {
        this.imageData = reader.result as string;
      };
      reader.readAsDataURL(file);
    }
  }

  onSubmit() {
    this.profileService.addProfile(this.form.value.name, this.form.value.image);
    this.form.reset();
    this.imageData = null;
  }
}

配置文件.service.ts

 import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { map } from "rxjs/operators";

import { Profile } from "../models/Profile";
import { Subject } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class ProfileService {
  private profiles: Profile[] = [];
  private profiles$ = new Subject<Profile[]>();
  readonly url = "http://localhost:3000/api/profiles";

  constructor(private http: HttpClient) {}

  getProfiles() {
    this.http
      .get<{ profiles: Profile[] }>(this.url)
      .pipe(
        map((profileData) => {
          return profileData.profiles;
        })
      )
      .subscribe((profiles) => {
        this.profiles = profiles;
        this.profiles$.next(this.profiles);
      });
  }

  getProfilesStream() {
    return this.profiles$.asObservable();
  }

  addProfile(name: string, image: File): void {
    const profileData = new FormData();
    profileData.append("name", name);
    profileData.append("image", image, name);
    this.http
      .post<{ profile: Profile }>(this.url, profileData)
      .subscribe((profileData) => {
        const profile: Profile = {
          _id: profileData.profile._id,
          name: name,
          imagePath: profileData.profile.imagePath,
        };
        this.profiles.push(profile);
        this.profiles$.next(this.profiles);
      });
  }
}

配置文件.ts

 export interface Profile {
  _id: string;
  name: string;
  imagePath: string;
}

原文由 dammika rajapaksha 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

角度文件上传

你尚未登录，登录后可以

动态参数请求后台服务未发送，如何解决？

nz-table 组件样式未生效，如何解决？

Stack Overflow 翻译