Antd Upload 和 Antd Form 结合的踩坑记录

今天弄了半天这个上传组件结合表单组件的问题。

这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能：
下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表（该列表是 Upload 组件内部实现的）。

由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定（如果有的话）。当然也可以不代理，单独处理，但这样最终提交数据还是要再增加上去，而且还需要自行实现必填项的校验。

此时既要照顾到 Upload 自身所需字段（特别是 uid 字段），又要迎合最终向后端提交附件时方便新老文件统一处理（通过 JSON.stringify() 的第二个过滤器参数进行处理）。

import React from 'react';
import {
  message,
  Modal,
  Row,
  Col,
  Form,
  Select,
  Button,
  Input,
  Spin,
  Radio,
  DatePicker,
  Upload,
  Icon
} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;


class MakeBill extends React.Component {
  state = {
    loading: false,
    disabledOk: false,
    confirmLoading: false,    
    fileList: [],
  }

  handleSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({ loading: true, confirmLoading: true });
        const submitInfo = JSON.parse(JSON.stringify(values, (key, value) => {
          if (key === 'pay_time') {
            return moment(value).format('YYYY-MM-DD');
          } else if (key === 'attachments') {
            return value.map(f => ({ ...f.saveParams, type: 1 }));
          }
          return value;
        }));
        commerceApi.saveInvoiceOfFinance(submitInfo).then(result => {
          message.success('提交成功！');
          this.props.form.resetFields();
          this.props.onClose('refresh');
          this.setState({ loading: false, confirmLoading: false });
        }, () => {
          this.setState({ loading: false, confirmLoading: false });
        });
      }
    });
  }

  closeForm = () => {
    this.props.form.resetFields();
    this.props.onClose();
  }

  getContactInfo = (id) => {
    commerceApi.getContactDetail({ id, isedit: true }, (result) => {
      this.setState({ relationContactInfo: result });
    });
  }

  render() {
    let { loading, disabledOk, confirmLoading, fileList } = this.state;
    let { form, show, incomeId, busId, details } = this.props;
    let _this = this;
    const { getFieldDecorator } = form;
    if (!Object.keys(details).length) { // 如果没有历史数据，则需要提供一些默认值
      details['invoice_type'] = 0;
    }
    const formItemLayout = {
      labelCol: {
        sm: { span: 8 },
      },
      wrapperCol: {
        sm: { span: 16 },
      },
    };
    const fullLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 20 },
      },
    };
    /**
      * 上传组件操作思路：
      * 当文件大于10M时，在调接口前，就提示报错，并且调用onRemove移除
      */
    const props = {
      accept: ".rar,.zip,.doc,.docx,.pdf,.jpg,.png",
      name: 'file',
      action: '/cmp/crm/upload',
      beforeUpload(file) {
        const isLt10M = file.size / 1024 / 1024 <= 10;
        if (!isLt10M) {
          message.error("文件大小限制在10M以下！");
          this.onRemove(file);
          return false;
        }
      },
      onRemove(file) {
        _this.setState({ fileList: fileList.filter(item => item.name !== file.name) }, () => {
          _this.props.form.setFieldsValue({ fileList: fileList });
        });
      },
      onChange(info) { // 上传中、完成、失败都会调用这个函数
        let curFileList = info.fileList;
        curFileList = curFileList.map((file) => {
          if (file.response) {
            // 这里上传组件回调的数据，有些是提供给上传组件自身使用的，所以不能不要
            // 而需要向后端提交的数据这里提前封装起来，以方便最终的提交
            let saveParams = {};
            saveParams["filename"] = file.response.data[0].filename;
            saveParams["url"] = file.response.data[0].url;
            saveParams["size"] = file.response.data[0].size;
            file["saveParams"] = saveParams;
            file['url'] = file.response.data[0].url;
          }
          return file;
        });
        curFileList = curFileList.filter(file => {
          if (file.size / 1024 / 1024 <= 10) {
            if (file.response) {
              return file.response.code === 0;
            }
            return true;
          } else {
            return false;
          }
        });
        _this.setState({ fileList: curFileList });
      },
      // fileList: fileList, // 上传组件已使用Form进行代理，所以不要再直接设置
    };

    return (
      <div>
        {
          show ? <Modal
            wrapClassName="vertical-center-modal"
            className="company-form-modal"
            title="申请发票"
            visible={show}
            width={750}
            maskClosable={false}
            onCancel={this.closeForm}
            footer={[
              <Button key="cancel" onClick={this.closeForm}>取消</Button>,
              <Button key="confirm" type="primary" loading={confirmLoading} disabled={disabledOk} onClick={this.handleSubmit}>确定</Button>
            ]}>
            <Spin spinning={loading}>
              <div className="modal-content-wrap">
                <Form>
                  <Row>
                    <FormItem {...fullLayout} label="证明材料">
                      {getFieldDecorator('attachments', {
                        initialValue: (details.attachments || []).map(f => ({
                          // 为了提供给上传组件回显
                          uid: f.id,  // 这是上传组件规定的文件唯一标识，内部会提供给Form以便正常渲染回显列表
                          name: f.filename,
                          status: 'done',
                          url: f.url,
                          // 为了迎合最终向后端提交附件时方便新老文件统一处理
                          saveParams: {
                            filename: f.filename,
                            url: f.url,
                            size: f.size
                          }
                        })),
                        rules: [{
                          required: true, message: '请上传证明材料'
                        }],
                        valuePropName: 'fileList',
                        getValueFromEvent: (e) => {
                          if (Array.isArray(e)) {
                            return e;
                          }
                          return e && e.fileList;
                        }
                      })(
                        <Upload {...props}>
                          <Button>
                            <Icon type="upload" /> 上传文件
                            </Button>
                          <p className="upload-desc">支持扩展名：.rar .zip .doc .pdf .jpg .png</p>
                          <p className="upload-desc">材料包括：合同，验收单，订单截图，打款记录</p>
                        </Upload>
                      )}
                    </FormItem>
                  </Row>
                </Form>
              </div>
            </Spin>
          </Modal> : null
        }
      </div>
    )
  }
}

export default Form.create()(MakeBill);