如何在angular4中上传相同的文件答案

【问题标题】：How to upload the SAME file in angular4如何在angular4中上传相同的文件
【发布时间】：2018-04-23 08:38:36
【问题描述】：

我能够成功上传文件，但现在的问题是它不允许我两次上传同一个文件。这是我的代码：

 <input type="file" (change)="onFileChange($event)" name="fileUploaded" value="Choose a File" accept=".xlsx, .xlsm">

我发现 onFileChange($event) 不会触发，因为我使用的侦听器是 (change) 并且我没有更改我正在上传的文件。我能做些什么来解决我的问题？谢谢

编辑：为了说明我为什么要这样做，我想上传一个 excel 文件，然后将其内容显示到页面上。但是当我上传一个 excel 文件然后使用 ms excel 编辑其数据然后保存并再次上传时，新的编辑不会显示在页面上。该页面仍显示旧数据。

这是我的 eventHandler 代码：

data: AOA = [ [], [] ];
reader: FileReader = new FileReader();
onFileChange(evt: any) {
        /* wire up file reader */
        console.log("G");
        const target: DataTransfer = <DataTransfer>(evt.target);
        this.reader.onload = (e: any) => {
            /* read workbook */
            this.data = [ [], [] ];
            console.log(target.types);
            const bstr: string  = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
            /* grab first sheet */
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];
            /* save data */
            this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
        }
            this.reader.readAsBinaryString(target.files[0]);
    }

【问题讨论】：

清除“onFileChange”函数末尾的输入

标签： angular typescript file-upload

【解决方案1】：

您可以参考然后清除您的输入：

模板

<input #myFileInput type="file"/>

脚本

@ViewChild('myFileInput') myFileInput;

onFileChange(event) { 
  this.myFileInput.nativeElement.value = '';
}

【讨论】：

嗨。我必须为它制作另一个组件吗？或者我只是插入我当前的打字稿文件？我必须更改“MyFileInput”还是直接复制并粘贴它？抱歉，我对此真的很陌生。
只需将其插入您自己的文件中即可。您可以将 myFileInput 命名为任何您想要的名称。
还是不行。我相信原因是我正在尝试上传相同的文件，但 onFileChange($event) 不会触发，因为侦听器是（更改）并且我正在上传相同的文件，尽管内容不同。
这就是你清除输入的原因，所以它不知道之前的文件是否相同。
那你做错了，我看不到是什么。

【解决方案2】：

它有点被缓存了。所以只要确保你在上传文件之前清理它，你可以做的就是将值设为空，然后上传文件

<input type ="file" #fileUpload style="visibility: hidden;" (change)="uploadResume($event)"> 
<button (click)="fileUpload.value='';fileUpload.click();">Upload</button>

【讨论】：

【解决方案3】：

您可以参考然后清除您的输入：

模板

<input (click)="clearFile()" #myFileInput type="file"/>

脚本

@ViewChild('myFileInput') myFileInput;

clearFile(event) { 
  this.myFileInput.nativeElement.value = '';
}

【讨论】：

【解决方案4】：

试试 (onclick)="this.value = null"

在您的 html 页面中添加 onclick 方法以删除以前的值，以便用户可以再次选择相同的文件。

【讨论】：

更多解释可能会改善这个答案。

【解决方案5】：

你也可以试试这个方法。我能够两次上传同一张图片。

app.component.html

<p>App image</p>
<input matInput [disabled]="true" />
<input #imageInput accept="image/*" (change)="selectImageFile(imageInput)" type="file" id="file" (click)="imageInput.value='';">

app.component.ts

selectImageFile(imageInput: any) {
let file: File = imageInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event: any) => {
  this.selectedFile = new ImageSnippet(event.target.result, file);
  this.applicationService.imageUpload(this.selectedFile.file).subscribe(
    (res) => {
      this.isImageSubmitted = true;
      this.selectedImagename = res.data;
    },
    (err) => {
      this.isImageSubmitted = false;
    }
  );
});
reader.readAsDataURL(file);

}

【讨论】：