打字稿文件上傳驗證

Question

我正在嘗試上傳文件，但以下代碼出現錯誤。 錯誤是屬性在HTML Element類型上不存在 。 如何解決呢？

我已針對以下代碼行注釋了該錯誤。

component.html

<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>

   <ul>
     <label>Select a Module Name</label>
     <select id = "ModuleDropDown">
       <option value="">Select</option>
       <option value="Recuirtmnet">Recuirtmnet</option>
       <option value="Talent" selected="selected">Talent</option>
       <option value="Attrition">Attrition</option>
       <option value="Performance">Performance</option>
       <option value="Survey">Survey</option>
      </select>
     </ul>

    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>

component.ts

fileSelected() {

    //Property 'files' does not exist on type 'HTMLElement'
    let file = document.getElementById('fileToUpload').files[0]; 

    if (file) {
        let fileSize = 0;
        if (file.size > 1024 * 1024)
            this.fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            this.fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        let dropDown = document.getElementById("ModuleDropDown");


        //Property 'options' does not exist on type 'HTMLElement'.
        //Property 'selectedIndex' does not exist on type 'HTMLElement'
        let dpVal = dropDown.options[dropDown.selectedIndex].value;

        let init_params = {};
        this.init_params.action = 'prepare';
        this.init_params.file_name = file.name;
        this.init_params.file_size = fileSize;
        this.init_params.moduleName = dpVal;

        ws.send(JSON.stringify(init_params))
        console.log("sending init params.....")

    }
}

Answer 1

您的代碼有很多問題。 您使用的是Vanilla JavaScript，而不是利用Angular語法。

1. 可以使用(change)跟蹤文件輸入上的(change) ，並將$event對象傳遞給更改處理程序。

2. 您可以使用[(ngModel)]從下拉列表中獲取所選選項的值。

3. 建議不要使用document來訪問DOM並對其進行更改或向其中顯示數據。 您應該改用字符串插值語法（ {{}} ）。

這是供您參考的示例StackBlitz 。

選擇一個選項，然后上載文件以在UI上查看“選定文件詳細信息”，並在控制台上看到“選定下拉菜單”。