Angular 使用 ng2-file-upload 上传文件遇到的问题

快来打我* 2021-11-26 10:02 384阅读 0赞

***Angular 上传文件 可参考[Angular2使用ng2-file-upload上传文件][Angular2_ng2-file-upload]***

这里记录在开发过程中遇到的问题：

1.  #### 删除选择的文件后，不能再选择上次选择的相同的文件 ####
    
    在 firefox 浏览器中，当未选择文件时，原样式是：  
    ![firefox 浏览器 input\[type="file"\] 未选择文件时原样式][firefox _ input_type_file_]  
    当已选择文件时，原样式是：  
    ![firefox 浏览器 input\[type="file"\] 已选择文件时原样式][firefox _ input_type_file_ 1]

根据设计要求，需要添加删除按钮，用于删除选择的文件。  
**在开发的过程中发现删除后，不能选择上一次选择的相同的文件，而其他的文件可以选择。**  
因为选择文件的时候是用的 （change）事件，所以在删除之后不能选择相同的文件。

我的方法是，删除之后清除掉上传的 input dom，然后再创建这个 dom。  
模板中：  
input 元素添加 `*ngIf = "isShowSelectFile"`  
组件中：  
初始化时，`isShowSelectFile: boolean = true;`  
删除时：

this.isShowSelectFile = false;
    setTimeout(() => {
    this.isShowSelectFile = true;
    }, 100);

这里附上关键代码，[查看codepen在线示例关键代码][codepen](**ng2-file-upload 插件在 Angular 中怎么使用请参考[Angular2使用ng2-file-upload上传文件][Angular2_ng2-file-upload]**)：

<div class="upload-template">
      <strong>上传模板：</strong>
      <div class="upload-file-container">
        <span class="upload-name" [class.uploaded-template]="selectedFileName !== '选择文件'">{
        {selectedFileName}}</span>
        <input id="selectFile" type="file" *ngIf="isShowSelectFile" placeholder="选择填写好的数据文件" title="选择填写好的数据文件"
               ng2FileSelect
               [uploader]="uploader"
               [disabled]="isImportingData"
               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
               (change)="selectedFileOnChanged($event)">
      </div>
      
      <button [hidden]="selectedFileName == '选择文件'" type="button" class="delete" title="删除" (click)="deleteUploadedFile()">删除</button>
    </div>

// 删除上传的文件
    deleteUploadedFile() {
        this.selectedFileName = "选择文件";
        this.uploader.clearQueue();
        this.uploadEnabled = false;
        this.isShowSelectFile = false;
        setTimeout(() => {
          this.isShowSelectFile = true;
        }, 100);
    }
    
    selectedFileOnChanged(event:any) {
        let filePath = event.target.files[0].name;
    
        //用户取消选择文件
        if(event.target.value =="") {
          this.uploader.clearQueue();
          this.selectedFileName = "选择文件";
          this.uploadEnabled = false;
        } else {
          //每次选择后，都只保留最新选择的文件
          let fileCount = this.uploader.queue.length;
          if(fileCount > 1) {
            for(let i = 1; i < fileCount; i++) {
              this.uploader.removeFromQueue(this.uploader.queue[0])
            }
          }
        }
    
        this.uploadEnabled = this.uploader.queue.length > 0;
    }

SCSS：
    
    .upload-template {
      $size: 36px;
      .upload-file-container {
        position: relative;
        height: $size;
        line-height: $size;
        cursor: pointer;
        margin-left: 10px;
        .upload-name {
          z-index: 2;
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          display: block;
          text-decoration: underline;
          height: $size;
          line-height: $size;
          color: #29e;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.uploaded-template {
            color: #444;
            text-decoration: none;
          }
          & + input {
            z-index: 3;
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: block;
            height: $size;
            line-height: $size;
            opacity: 0;
          }
        }
      }
      .delete {
        float: left;
        color: #f00;
        line-height: $size;
        padding-right: 1em;
        padding-left: 1em;
      }
    }

在 firefox 浏览器中，当未选择文件时，美化后样式是：  
![firefox 浏览器 input\[type="file"\] 未选择文件时美化样式][firefox _ input_type_file_ 2]  
当已选择文件时，美化后样式是：  
![firefox 浏览器 input\[type="file"\] 已选择文件时美化样式][firefox _ input_type_file_ 3]

转载于:https://www.cnblogs.com/xinjie-just/p/11059624.html

[Angular2_ng2-file-upload]: https://www.jianshu.com/p/0741186f60ab
[firefox _ input_type_file_]: /images/20211126/cf93991746b441c288f3db16ec373e31.png
[firefox _ input_type_file_ 1]: /images/20211126/4e9667162bfe4b00813451aa977c10fa.png
[codepen]: https://codepen.io/xinjie-just/pen/qzREVV
[firefox _ input_type_file_ 2]: /images/20211126/8565172b1d4e4565a7ec9451871d756c.png
[firefox _ input_type_file_ 3]: /images/20211126/47d85fc7a237490dab087f0739ef94de.png