公司需求要做一個上傳zip包的功能效果圖

首先是樣式程式碼

 <FormItem
              {...formItemLayout}
              label="選擇zip包"
              validateStatus={this.state.uploadIncrValidateStatus}
              help={this.state.uploadIncrFailTips}
            >
              {getFieldDecorator('resourceLink', {
                initialValue: '0',
                rules: [
                  {
                    required: true,
                  }],
                })(<Upload {...uploadIncrProps}>
                  <Button type="file">上傳</Button>
                </Upload>)}
                  <span className="upload-desc">{resourceLink ? '已上傳' : ''}</span>
            </FormItem>
 

然後就是上傳後端程式碼

const uploadIncrProps = {
      showUploadList: false,
      onChange: this.uploadIncrChange,
      accept: 'zip/*',
      action: '/api/file/upload',
      headers: {
        token: storage.get('token'),
        terminal: 'WEB',
      },
    };

上傳狀態改變方法

 uploadIncrChange(info) {
    if (info.file.status === 'uploading') {
      Loading.open();
    }
    if (info.file.status === 'done') {
      Loading.close();
      const { response } = info.file;
      console.log('weichongbin1 response = ', response);
      this.setState({
        // incrFileUrl: response.data.url,
        resourceLink: response.data.fileId,
        uploadIncrValidateStatus: 'success',
      });
    } else if (info.file.status === 'error') {
      Loading.close();
      this.setState({
        resourceLink: '',
        uploadIncrValidateStatus: 'error',
      });
    }
  }
 

提交的時候驗證下

if (!this.props.isEdit && (this.state.resourceLink === undefined || this.state.resourceLink <= 0)) {
      console.log('weichongbin this.state.resourceLink = ', this.state.resourceLink);
      this.setState({
        uploadValidateStatus: 'error',
        uploadIncrFailTips: '請上傳zip包',
      });
      isCanCreate = false;
    }
 

ok 收工