角度文件上传工作但名称在上传时变成随机文本

Question

我正在尝试在管理面板上上传 pdf 文件并在保存时将其发送到服务器。 为此，我正在使用 javascript 文件阅读器 文件上传功能工作正常，但一段时间后名称变成随机文本。

最初和理想情况下，这就是它的样子

文件上传后：

但是这会在 4-5 秒后发生：

一段时间后的文件：

用于上传和删除文档的 .ts 文件

    isAttachment : boolean;
    attachment: any;     

    onFileChanged(attachmentInput: any) {    
    if (attachmentInput.target.files && 
        attachmentInput.target.files[0]) {
    this.attachment = '';
    Array.from(attachmentInput.target.files).forEach((file: File) => {
      console.log(file);
      this.attachment += file.name ;
      console.log('Updated', this.attachment);
    });
    
    const reader = new FileReader();
    reader.onload = (e: any) => {
      this.attachment = reader.result;
      
    };
    reader.readAsDataURL(this.attachment);
    }
    
    }
    
    deleteFile(){ 
    this.attachment = null; 
    this.expository.attachment = null; 
    this.isAttachment = false; 
    }

我的 HTML 代码：

<div *ngIf="expository.isAttachment == true">
    <div [hidden]="expository.id">
        <div *ngIf="attachment" class="row container-fluid ">
            <input #attachmentInput type="file" (change)="onFileChanged($event)" class="fileInputProfile " accept=".pdf"  #fileInput  id="file"/>
        </div>
    </div>
    <div *ngIf="!attachment" class="row container-fluid ">
        <input type="file" (change)="onFileChanged($event)" class="fileInputProfile " accept=".pdf"  #fileInput id="file"/>
    </div>
    <div class="img-space">
        <div *ngIf="attachment">
            <div style="margin-bottom: 5%;">
                <mat-icon>article</mat-icon> {{attachment}}
            </div>
            <button type="button" class="btn btn-danger " (click)="deleteFile()"  >
                Remove
            </button>
        </div>
    </div>
</div>

Answer 1

您使用相同的变量

this.attachment

作为文件名，然后作为文件内容。改用两个变量。例如，

attachmentName

isAttachment : boolean;
attachment: any; 
attachmentName: string = ''; 

onFileChanged(attachmentInput: any) {

  if (attachmentInput.target.files && attachmentInput.target.files[0]) {
    this.attachmentName = '';
    Array.from(attachmentInput.target.files).forEach((file: File) => {
      console.log(file);
      this.attachmentName += file.name ;
      console.log('Updated', this.attachmentName);
    });

    const reader = new FileReader();
    reader.onload = (e: any) => {
      this.attachment = reader.result;
    };
    reader.readAsDataURL(this.attachment);
  }

}

deleteFile(){ 
  this.attachment = null; 
  this.attachmentName = ''; 
  this.expository.attachment = null; 
  this.isAttachment = false; 
}

<div *ngIf="expository.isAttachment == true">
                      <!-- <mat-label>Upload Attachment</mat-label> -->
                      <div [hidden]="expository.id">
                        <div *ngIf="attachment" class="row container-fluid ">
                          <input #attachmentInput type="file" (change)="onFileChanged($event)" class="fileInputProfile " accept=".pdf"  #fileInput  id="file"/>
                        </div>
                      </div>
          
                      <div *ngIf="!attachment" class="row container-fluid ">
                        <input type="file" (change)="onFileChanged($event)" class="fileInputProfile " accept=".pdf"  #fileInput id="file"/>
                      </div>
          
                      <div class="img-space">
                        <div *ngIf="attachment">
                          <div style="margin-bottom: 5%;">
                            <mat-icon>article</mat-icon> {{attachmentName}}
                          </div>
                          <button type="button" class="btn btn-danger " (click)="deleteFile()"  >
                            Remove
                          </button>
    ```