antd-upload

nzBeforeUpload:函数可以执行,但是 return new Observable((observer: Observer) => {}始终没有执行,原来,我导入使用的是:

import {Observable, Observer} from "rxjs/index";

实际应该使用:

import {Observable, Observer} from "rxjs";

编辑器自动导入的时候,还是有问题的!

报错2:

Unhandled upload beforeUpload error TypeError: _this.handleUpload is not a function

handleUpload 确实是自己写的一个函数。

解决方法:使用官网上的写法

beforeUpload=(file)=>{}

/**
 * 上传之前
 */
beforeUpload=(file)=>{
  console.log("file:",file); // name size type等
  return new Observable((observer: Observer<boolean>)=>{
    const isTypeRight = file.type =='image/jpeg'|| file.type == 'image/png';
    console.log("isTypeRight:",isTypeRight);
    if(!isTypeRight){
      this.message.error('只能上传jpg或png格式图片');
      observer.complete();
      return;
    }
    const isListKB=  file.size/1024>10000;
    console.log("isListKB:",isListKB);
    if(isListKB){
      this.message.error('上传图片不能大于500KB');
      observer.complete();
      return;
    }
    this.handleUpload(file);
    observer.next(isTypeRight&&isListKB);
    observer.complete();
  })
}


/**
 * 上传
 */
handleUpload(file){
  console.log('handleUpload',file);
  const formData = new FormData();
  formData.append('file', file);
  const req = new HttpRequest('POST', '/xxxxxxxxxx/api/file/upload', formData, {
    reportProgress: true
  });
  this.http
    .request(req)
    .pipe(filter(e => e instanceof HttpResponse))
    .subscribe(
      (event: any) => {
        console.log("接口返回event:",event);
        this.value = event.body.cosPath;
        this.message.success('上传成功');
      },
      err => {
        this.message.error('上传失败');
      }
    );
}

你可能感兴趣的:(angular)