📜  角度文件上传

📅  最后修改于: 2021-05-13 19:02:49             🧑  作者: Mango

上传文件是制作存储某种图像数据的表单的重要组成部分。它有助于使用图像上传的应用程序或文件共享。这个文件上传组件使用file.io API来上传文件,并且作为回报,它提供了一个可共享的链接。此外,我们可以将get请求发送到可共享的链接以获取文件,但目前,我们仅关注上载部分,因此我们仅使用post方法。

方法:

  1. 使用以下命令创建一个新的角度应用程序
    ng new angular-file-upload 
  2. 使用cd命令在应用内移动-
    cd src/app/
  3. 生成新的组件文件-
    ng g c file-upload/ 
  4. 打开src / app文件夹,然后开始编辑app.component.html文件。
    
    
  5. 通过以下命令为文件上传组件创建服务:
    ng g s file-upload/
  6. 打开src / app / file-upload文件夹,然后开始编辑file-upload.component.ts文件。
    import { Component, OnInit } from '@angular/core';
    import { FileUploadService } from './file-upload.service';
      
    @Component({
        selector: 'app-file-upload',
        templateUrl: './file-upload.component.html',
        styleUrls: ['./file-upload.component.css']
    })
    export class FileUploadComponent implements OnInit {
      
        // Variable to store shortLink from api response
        shortLink: string = "";
        loading: boolean = false; // Flag variable
        file: File = null; // Variable to store file
      
        // Inject service 
        constructor(private fileUploadService: FileUploadService) { }
      
        ngOnInit(): void {
        }
      
        // On file Select
        onChange(event) {
            this.file = event.target.files[0];
        }
      
        // OnClick of button Upload
        onUpload() {
            this.loading = !this.loading;
            console.log(this.file);
            this.fileUploadService.upload(this.file).subscribe(
                (event: any) => {
                    if (typeof (event) === 'object') {
      
                        // Short link via api response
                        this.shortLink = event.link;
      
                        this.loading = false; // Flag variable 
                    }
                }
            );
        }
    }
    
  7. 打开src / app / file-upload /并开始编辑file-upload.service.ts文件。
    import { Injectable } from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    import {Observable} from 'rxjs';
    @Injectable({
      providedIn: 'root'
    })
    export class FileUploadService {
        
      // API url
      baseApiUrl = "https://file.io"
        
      constructor(private http:HttpClient) { }
      
      // Returns an observable
      upload(file):Observable {
      
          // Create form data
          const formData = new FormData(); 
            
          // Store form name as "file" with file data
          formData.append("file", file, file.name);
            
          // Make http post request over api
          // with formData as req
          return this.http.post(this.baseApiUrl, formData)
      }
    }
    
  8. 打开src / app / file-upload并开始编辑file-upload.component.html文件。
                
      
        

    Visit Here

        {{shortLink}}
      
        

    Loading ...

  9. 打开src / app /并开始编辑app.module.ts文件。
    import { BrowserModule } from 
        '@angular/platform-browser';
    import { NgModule } from '@angular/core';
      
    import { FileUploadComponent } from 
        './file-upload/file-upload.component';
      
    import { AppComponent } from './app.component';
    import {HttpClientModule} from 
        '@angular/common/http';
    @NgModule({
      declarations: [
        AppComponent,
        FileUploadComponent,
      ],
      imports: [
        BrowserModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  10. 现在运行此命令以在localhost上提供服务
    ng serve

    输出:

    • 选择文件之前:
    • 选择文件并单击按钮后:
    • 加载完成后: