如何檢測文件輸入是否在Angular中填充？

Question

我使用的是什麼

• 角
• 火力地堡

我試圖實現

• 上傳時項目的細節，我想知道是否選擇了圖像。

• 如果沒有，請從服務不同的方法，並指定一個默認的圖像

• 如果是這樣，使用圖像

問題

我可能接近這個錯誤，但我想要執行此邏輯的方式是查看用戶是否選擇了「選擇圖像」（輸入文件類型）。如果圖像已被選中，「如果（文件）」似乎如果圖像沒有被選中的錯誤了與註冊細，執行以下操作：

ProjectsAddComponent.html:71 ERROR TypeError: Cannot read property 'item' of undefined

1. 我如何檢測用戶選擇了一個圖像上傳數據？

項目添加HTML

<div class="vs__upload__container"> 
 
    <input type="file" id="file-1" class="inputfile inputfile-1" (change)="detectFiles($event)" /> 
 
    <label class="vs__upload__button" for="file-1"> 
 
    <i class="fa fa-upload" aria-hidden="true"></i> 
 
    <span>Choose a file&hellip;</span> 
 
    </label> 
 
</div> 
 

 

 
<div class="vs__details__actions"> 
 
    <button class="vs__button" (click)="addNewProject(newTitle.value, newReference.value, newDate.value); newTitle.value=''; 
 
    newReference.value=''; newDate.value='';"> 
 
    Add 
 
    </button> 
 
</div>

項目添加組件TS

if語句

請參閱 'addNewProject' 功能

import { Component, OnInit } from '@angular/core'; 
 
import { ProjectsAddService } from './projects-add.service'; 
 
import { Upload } from './upload'; 
 
import * as _ from "lodash"; 
 

 
@Component({ 
 
    selector: 'upload-form', 
 
    templateUrl: './projects-add.component.html', 
 
    styleUrls: ['./projects-add.component.css'] 
 
}) 
 
export class ProjectsAddComponent { 
 

 
    selectedFiles: FileList; 
 
    currentUpload: Upload; 
 

 
    constructor(private upSvc: ProjectsAddService) { } 
 

 
    detectFiles(event) { 
 
    this.selectedFiles = event.target.files; 
 
    } 
 

 
    uploadSingle() { 
 
    let file = this.selectedFiles.item(0) 
 
    this.currentUpload = new Upload(file); 
 
    } 
 

 
    addNewProject(title: string, reference: string, date: string) { 
 
    let file = this.selectedFiles.item(0) 
 
    this.currentUpload = new Upload(file); 
 
    if (file) { 
 
     console.log('this is the file = ', file); 
 
     // Call method in service to include the upload file 
 
this.upSvc.addNewProjectWithImage(title, reference, date, this.currentUpload); 
 
    } else { 
 
     console.log('no file'); 
 
     this.upSvc.addNewProjectWithOutImage(title, reference, date); 
 
    } 
 
    } 
 

 

 
}

Answer 1

你需要的，如果有文件被選中進行檢查。你的代碼可能拋出未定義的異常。

addNewProject(title: string, reference: string, date: string) 
{   
    // Check if an image file has been selected 
    if(this.selectedFiles && this.selectedFiles.length > 0) { 
     let file = this.selectedFiles.item(0); 
     this.currentUpload = new Upload(file); 
     console.log('this is the file = ', file); 
     // Call method in service to include the upload file 
     this.upSvc.addNewProjectWithImage(title, reference, date, this.currentUpload); 
    } 
    // otherwise call the method with default image. 
    else { 
     console.log('no file'); 
     this.upSvc.addNewProjectWithOutImage(title, reference, date); 
    } 
} 

檢查您的uploadSingle方法中的相同條件。

uploadSingle() { 
    if(this.selectedFiles && this.selectedFiles.length > 0) { 
     let file = this.selectedFiles.item(0); 
     this.currentUpload = new Upload(file); 
    } 
}