angular7中文件上传

最新推荐文章于 2025-09-24 13:38:47 发布

原创最新推荐文章于 2025-09-24 13:38:47 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

该博客介绍了如何在Angular应用中利用ng-zorro库的Upload组件实现自定义上传功能。通过设置[nzCustomRequest]属性，可以改变默认的上传行为，并通过[nzShowUploadList]隐藏上传列表。在`customReq`方法中，创建FormData对象并将文件添加到表单数据中，然后调用API接口进行文件上传。当上传成功时，会显示成功的消息；如果上传失败，则显示错误信息。

使用ng-zorro里面组件Upload上传

  <nz-upload [nzCustomRequest]="customReq" [nzShowUploadList]='false'>
      <button nz-button><i nz-icon nzType="upload"></i><span>上传</span> </button>
  </nz-upload>

需要引入 import { UploadXHRArgs } from 'ng-zorro-antd';

其中nzCustomRequest 改变默认上传行为，自定义上传；

[nzShowUploadList] 是否展示 uploadList,默认值是true;不想展示设置为false;

customReq = (item: UploadXHRArgs) => {

    const formData = new FormData();

    formData.append('file', item.file as any);

    this.api.post('----',formData).then(res=>{ 
   
         this.message.success('导入成功');
    
     }).catch((error) => {

        this.message.error(error.message);

      })
   
   
   
   
};

'---’代表请求的接口；