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

【问题标题】：getting the value of file input type returns empty - angular获取文件输入类型的值返回空 - 角度
【发布时间】：2020-02-27 06:43:30
【问题描述】：

我正在尝试使用 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

请帮忙

【问题讨论】：

你在什么时候这样做？
从视图中选择上传按钮时
那么(document.getElementById('doc') as HTMLInputElement).value 是否为您提供了正确的值？
是的。让我附上我的标题代码
奇怪但事实是，我的标题是问题所在。感谢一百万，您的见解使我找到了解决方案，我从没想过这可能是问题

标签： angular typescript

【解决方案1】：

这是因为您无法使用 stringify 将 Object File 转换为 JSON 字符串。

你可以做的是：

以字符串形式读取文件：

例子：

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);
}

【讨论】：