h5 react 上传zip包开发

公司需求要做一个上传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 收工