时间戳

首页 > 解决方案 > 获取文件输入类型的值返回空 - 角度

angular - 获取文件输入类型的值返回空 - 角度

问题描述

我正在尝试使用 id 以角度获取文件输入类型的值。我能够获取文件名，但是当我尝试获取输入的值时，它返回空并在代码中引发错误。

这是我的代码

<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

请协助

标签： angulartypescript

解决方案

这是因为您无法使用 stringify 将 Object File 转换为 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));
}
  1. 将文件读取为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);
}

推荐阅读