Angular ant.design上传组件使用阿里云oss

悠悠 2023-07-13 13:42 22阅读 0赞

### Angular ant.design上传组件使用阿里云oss ###

ng.ant.design并没有上传到阿里云oss的具体例子。  
在项目中使用到，抽取了部分项目代码，可做参考

参数资料：  
upload组件地址: [https://ng.ant.design/components/upload/zh\#components-upload-demo-basic][https_ng.ant.design_components_upload_zh_components-upload-demo-basic]

文件：

*  base-data.service.ts 封装共用数据相关方法的文件
 *  edit.component.html 上传组件示例的html 部分代码
 *  edit.component.ts 上传组件示例的ts 部分代码

<nz-upload class="avatar-uploader" [nzAction]="ossUploadUrl" nzName="file" nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event)" [nzData]="ossUploadData" [nzCustomRequest]="nzCustomRequest">
            <ng-container *ngIf="!i.logo">
              <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
              <div class="ant-upload-text">上传图片</div>
            </ng-container>
            <img *ngIf="i.logo" [src]="i.logo" class="avatar" />
          </nz-upload>

// edit.component.ts
    
      // 上传提示
      loading = false;
      // 默认上传地址
      ossUploadUrl = '';
      // 上传前校验
      beforeUpload = this.utilsService.beforeNzUploadImg;
      // 上传参数, 阿里OSS钥匙等信息
      ossUploadData: OssUploadParams = { };
      
    ngOnInit(): void { 
        if (this.isCreate) { 
          this.i = {  ...this.record };
        } else { 
          this.getData(this.record);
        }
    
        this.baseDataService.getOssPolicy().subscribe((data) => { 
          this.ossUploadData = data;
          this.ossUploadUrl = this.ossUploadData.host;
        })
      }
      
    /** * 自定义组件上传事件 * */
      nzCustomRequest = (item: UploadXHRArgs) => { 
        this.baseDataService.ossCustomRequest(item, this.ossUploadData, () => { 
          const imgUrl = `${ this.ossUploadData.host}/${ this.ossUploadData.dir}/${ item.file.name}`;
          this.i.logo = imgUrl;
        })
      }
      
    /** * 上传事件 * @param info 图片文件 */
      handleChange(info: {  file: UploadFile }): void { 
        console.log(info);
      }

// base-data.service.ts
    
      /** * 阿里OSS自定义上传 * @param item UploadXHRArgs */
      ossCustomRequest(item: any, ossUploadData: OssUploadParams, successCallback?: Function) { 
        // Create a FormData here to store files and other parameters.
        const formData = new FormData();
    
        formData.append('policy', ossUploadData.policy);
        formData.append('signature', ossUploadData.signature);
        formData.append('OSSAccessKeyId', ossUploadData.OSSAccessKeyId);
        formData.append('key', ossUploadData.key);
        formData.append('dir', ossUploadData.dir);
        formData.append('file', item.file as any);
        // Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.
        return this.http.post(ossUploadData.host, formData).subscribe(
          (event: any) => { 
            console.log(event);
            if (successCallback) { 
              successCallback(event)
            }
          },
          err => { 
            item.onError!(err, item.file!);
          }
        );
      }
      
    export interface OssUploadParams { 
      policy?: string;
      signature?: string;
      OSSAccessKeyId?: string;
      key?: string;
      dir?: string;
      host?: string;
      file?: any;
    }

[https_ng.ant.design_components_upload_zh_components-upload-demo-basic]: https://ng.ant.design/components/upload/zh#components-upload-demo-basic