自摸antd

// render
// 配置
 const fileProps = {
      multiple: false,
      name: 'files',
      action:'/upload', /*后端地址*/
      onRemove: (file) => {
        this.setState(({fileList}) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({fileList}) => ({
          fileList: [...fileList, file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };

// 拖拽组件
 <Upload.Dragger
     {...fileProps}
     >
       <p className="ant-upload-drag-icon">
         <Icon type="inbox"/>
       </p>
       <p className="ant-upload-text">点击 或者 拖拽到此区域进行上传</p>
 </Upload.Dragger>
// 上传
  handleUpload = () => {
    const {fileList} = this.state;
    this.props.form.validateFields((errors, values: Department) => {
      if (errors) {
        return;
      }

      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append('files', file);
        formData.append('后端接受的额外字段', 额外字段 + '');
        //额外字段 + '' 转化成string
      });

      this.setState({
        uploading: true,
      });
      this.props.dispatch({
        type: '/upload',
        payload: formData,
      }).then(
        (res) => {
          this.setState({
            uploading: false,
          });
          if (res && res.data && res.data.result) {
            this.setState({
              fileList: [],
            });
            Notification.success('上传成功');
            this.setState({
              visible: false,
            });
            this.loadList();
          } else if (res && res.data && res.data.result === false) {
            Notification.error(res.data.msg);
          }
        },
        () => {
          Notification.error('上传失败');
        }
      );
    })
  };
 if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
      if (newOptions.params instanceof FormData) {
      // 传图时使用默认即可,无需设置请求头
        newOptions.body = newOptions.params;
      } else {
        newOptions.headers = {
          'Accept': 'application/json',
          'Content-Type': 'application/json;charset=utf-8'
        };
        newOptions.body = JSON.stringify(newOptions.params);
      }
    } else{// ......}
   // fetch 请求。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值