Question

我使用Angular 6。

我有一个简单的input type="file"，它将数据传递给img scr，向我显示需要上传的图像。

当我第一次选择图像时，什么也没有发生，而当我第二次选择图像时，我确实看到了预览图像。

我想念为什么我第一次看不到图像预览？

我的html

<div class="container" class="border">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Choose File</h3>
            <form (ngSubmit)="onSubmit()">
                <span style="color:red;" *ngIf="message">{{message}}</span>
                <input #file type="file"  ngf-max-size='10' accept='image/*' name="image" (change)="preview(file)">
                <img [src]="imgURL" height="200" width="200" *ngIf="imgURL">
                <div class="form-group">
                    <button class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

我的TypeScript

export class BottomSheetComponent implements OnInit {

  token = this.pzLogin.userLoginAccessToken;
  public imagePath;
  imgURL: any = this.pzLogin.UserLoginClaims.ImageUrl;
  public message: string;
  fileData = new FileReader();

  constructor(
    private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>,
     private http: HttpClient, private pzLogin: PrivateZoneLoginService,
     private localStorageService: LocalStorageService) { }

 /* openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }*/

  ngOnInit() {

  }

  preview(event) {

    if (event.files.length === 0) {
      return;
    }

    const mimeType = event.files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = 'Only images are supported.';
      return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    reader.onload = () => {
    this.imgURL =  reader.result;
    this.fileData = event.files;
    };
  }

  onSubmit() {
    const formData = new FormData();
   formData.append('UploadedFile', this.fileData[0], this.fileData[0].name);
   formData.append('token', this.token);
    this.http.post('http://localhost:11111/PrivateZone/UploadUserImage', formData)
      .subscribe(res => {
        console.log('res' + res);
        this.localStorageService.setItem('UserLoginClaims', res);
      });
  }
}

Answer 1

您可以尝试

 preview(event) {

    if (event.files.length === 0) {
      return;
    }

    const mimeType = event.files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = 'Only images are supported.';
      return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    const self = this; // here we gave reference of this to self 
    reader.onload = () => {
    self.imgURL =  reader.result;
    self.fileData = event.files;
    };
  }

让我知道它是否有效。

Answer 2

尝试这样

预览（事件）{

if (event.files.length === 0) {
  return;
}

const mimeType = event.files[0].type;
if (mimeType.match(/image\/*/) == null) {
  this.message = 'Only images are supported.';
  return;
}

const fileSize = event.files[0].size;
if (fileSize > 200839) {
  this.message = 'Maximum upload file size 200 kb.';
  return ;
}

const reader  = new FileReader();
reader.readAsDataURL(event.files[0]);

const _self = this;
reader.onload = () => {
_self.imgURL =  reader.result;
_self.fileData = event.files;
};

}

Answer 3

我在“底部工作表”组件中有此上传图像，这是一个问题。

您只需要添加this._bottomSheetRef.containerInstance.enter();

这将加载图像

这是我所做的更改：

  this.reader.onload = () => {
      this.imgURL = this.reader.result;
       this.fileData = event.files;
       this._bottomSheetRef.containerInstance.enter();
    };

angular 6文件上传预览仅在第二次上传后才能工作

3 个答案: