从输入类型获取文件答案

【问题标题】：Get file from input type从输入类型获取文件
【发布时间】：2019-02-16 20:26:49
【问题描述】：

我们需要获取 xls 文件并以 json 格式获取其内容。我可以这样做，但使用这样的硬编码 xls 文件路径：

    var url = "D:/ionic/Docs/Test.xlsx";

我需要做的是，从 html 输入标签中选择这个文件并将其放入var url。我该怎么做？

Home.html

<input type="file" accept="all/*" [(ngModel)]="getfile" (change)="onFileSelected($event)" id="fileInput"/>

Home.ts代码：

onFileSelected()
  {
    var url = //what do I do here ;

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

出于安全原因，不允许浏览器访问文件系统。

所以不要浪费你的时间。

但你可以读取文件数据如下。

HTML

<input type="file" (change)="onFileSelected($event)" accept="all/*"/>

    onFileSelected(event) {

        let file = event.target.files[0];  

        let reader = new FileReader();

        reader.onload = (e: any) => {
           let fileData = e.target.result;
           console.log(fileData);
        };
       reader.readAsDataURL(file);
}

Working example

【讨论】：

【解决方案2】：

filename: string = '' ;
onFileSelected(event){
  let file = event.target.files[0];        
  this.filename= file.name;
}

您将在 filename 变量中获取您的文件。

【讨论】：

这只是获取文件名，而不是路径，直到我在 var url 中得到它，它不会读取 xls
@user2828442 not the path 是什么意思？
我使用了这段代码，但它给了我 Test.xlsx 。但我想获得像“D：/ionic/Docs/Test.xlsx”这样的完整路径并转换为json。
@user2828442 要获取完整的文件路径，您应该使用 Web API 调用任何方法。