получение значения типа ввода файла возвращает пустое значение - angular

Question

Я пытаюсь получить значение типа ввода файла в angular, используя идентификатор. Я могу получить имя файла, но когда я пытаюсь получить значение ввода, он возвращается пустым и выдает ошибку в коде.

вот мой код

<input type="file" class="form-control-file"
                             id="doc" size="60"/>

ts файл, в котором я пытаюсь получить значение

let f = (document.getElementById('doc') as HTMLInputElement).files[0]
      let formdataF = (document.getElementById('doc') as HTMLInputElement).value

      console.log("document name " + JSON.stringify(f)); //this keeps returning empty

любезно помогите

Answer 1

Это потому, что вы не можете преобразовать объектный файл в JSON строку со строкой.

Что вы можете сделать:

1. Чтение файла в виде строки:

Пример:

async getValues() {
  let f = (document.getElementById('doc') as HTMLInputElement).files[0]
  let formdataF = (document.getElementById('doc') as HTMLInputElement).value
  const toBase64 = file => new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
  });
  const result = await toBase64(f);
  console.log("file", JSON.stringify(result));
}

Чтение файла как base64 строка:

Пример:

getValues() {
  let f = (document.getElementById('doc') as HTMLInputElement).files[0]
  let formdataF = (document.getElementById('doc') as HTMLInputElement).value
    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('file :', event.target.result);
    };
  reader.readAsText(f);
}