Question

我们在选择文件和上传文件时遇到2个问题。第一个问题是，当您上传图像时，文件名仍保留在输入中。这是代码。

OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      .catch (err => this.error = err);

  }

  Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
          this.SettingsForm.reset()
        },
        err => err
      );
    }
  }
  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        const result = reader.result;
        if (!result) reject('Cannot read variable');
        if (this.images.length>=4) reject('You can have only 4 images');
        if (result.length * 2  > 2**21) reject('File exceeds the maximum size'); // Note: 2*2**20 = 2**21 
        resolve(reader.result);
      });

      reader.addEventListener('error', event => {
        reject(event);
      });

      reader.readAsDataURL(file);
    });

    return fileValue;
  }

HTML

 <div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">Example file input</label>
                    <input #myInput ng2FileSelect [uploader]="uploader" (onFileSelected)="OnFileSelected($event)" type="file"
                        class="form-control-file" id="exampleFormControlFile1" />
                </div>
                <p *ngIf="error"> {{error}}</p>
                <button (click)="Upload()" type="submit" class=" btn btn-default submit-btn btn-upload ">
                    <i class="material-icons">attachment</i>
                    Upload Image</button>
            </div>

上传图像后如何重置表格？另外，如何使显示的错误消息持续3秒钟？如果选择了错误的文件，即使添加了有效文件后，错误也会一直存在。我们考虑过添加

setTimeout(() => {

        }, 3000); // just example
      },

但不确定在哪里添加？如何解决这两个问题？

Answer 1

您可以这样做在您的component.ts

中

import { ViewChild } from '@angular/core';

然后定义一个变量来保存它：

@ViewChild('myInput')
myInputVariable: ElementRef;

然后在您的函数中

Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
          this.myInputVariable.nativeElement.value = "";
        },
        err => {
            console.log(err);
        }
      );
    }
  }

要消除该错误： OnFileSelected（事件）{ const文件：File = event [0];

this.ReadAsBase64(file)
  .then(result => {
    this.selectedFile = result;
  })
  .catch (err => {this.error = err; setTimeout(()=> {this.error = ''},2000}));

}

Answer 2

select cte.ContractId,  cte.CurrentPlan, p1.[Name] as PrevPlan
from ContractsCTE cte
left join (SELECT t.CONTRACTID, t.STATUSID, t.PLANID, row_number() OVER (PARTITION BY t.CONTRACTID, t.STATUSID ORDER BY t.CREATEDATE DESC) rn FROM @TRAILS t WHERE t.STATUSID = 2)t1 
    on cte.ContractId = t1.ContractId AND t1.rn = 1
left join @CONTRACTS c1 on c1.Id = t1.ContractId AND t1.rn = 1
left join @PLANS p1 on t1.PlanId = p1.Id AND t1.rn = 1
Order by cte.CONTRACTID

在Angular中上传图片后如何重置文件输入形式？

2 个答案: