antd的upload使用

最近再写一个Quick import功能，需要将上传的文件及其他参数一同传给后端，在使用formData时候一直出现问题，因此将他记录下来；

Upload使用方法可以直接按照官网上将路径参数分别写入action和data中，也可以直接使用案例上面action不需要改变自己写提交方法；

下面是三个不同参数传递方式：

import React from 'react';
import { Modal, Form, Input, Upload, Button, Icon } from 'antd';

const FormItem = Form.Item;

class ShopModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };
  }

  showModalHandler = e => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  okHandler = () => {
    const { onOk, form, data } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        if (!data) {
          onOk(values);
        } else {
          onOk(data.id, values);
        }
        form.resetFields();
        this.hideModalHandler();
      }
    });
  };

  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const { visible } = this.state;
    const { children, form, data = {} } = this.props;
    const { name = '', price = '', stock = '' } = data;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    return (
      <span>
        <span onClick={this.showModalHandler}>{children}</span>
        <Modal
          title={data ? 'edit' : 'add'}
          visible={visible}
          onOk={this.okHandler}
          onCancel={this.hideModalHandler}
        >
          <Form layout="horizontal">
            <FormItem {...formItemLayout} label="name">
              {getFieldDecorator('name', {
                initialValue: name,
                rules: [
                  {
                    required: true,
                    message: 'name不可为空!',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="picture">
              {getFieldDecorator('photo', {
                valuePropName: 'fileList',
                getValueFromEvent: this.normFile,
                rules: [
                  {
                    required: Object.keys(data).length === 0,
                    message: 'picture不可为空!',
                  },
                ],
              })(
                <Upload name="photo" listType="text" beforeUpload={() => false}>
                  <Button>
                    <Icon type="upload" /> Click to upload
                  </Button>
                </Upload>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="售价">
              {getFieldDecorator('price', {
                initialValue: price,
                rules: [
                  {
                    required: true,
                    message: '不能为空!',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="库存">
              {getFieldDecorator('stock', {
                initialValue: stock,
                rules: [
                  {
                    required: true,
                    message: '库存不可为空!',
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(ShopModal);

(2)是直接按照upload api的使用方法，将action=“请求路径”，data="传递参数"

（3）将文件及参数信息foramData.append();

let fileData = new FormData();
const {file: {originFileObj}} = values.file(Form表单)；
for(let item in dataParament){
    if(dataParament[item]){
        fileData.append(item,dataParament[item])
    }
}
this.props.dispatch({
    type: '',
   payload:fileData
})
需要注意的是：在network查看时候参数存储在form Data中而不是request payload;
而我在写的时候一直是 request payload,造成的原因是在model中参数传递不能用{payload}而是payload;
dva中model一般参数书写：const response = yiled request(server.import,{...payload});这里要写成

const response = yiled request(server.import,payload);
具体的看一下formData吧