import { Button, Form, Input, message, Upload} from 'antd';

this.state = {
      previewVisible: false,
      previewImage: '',
      fileList: [] //用來存圖片列表
    };

<Form.Item
            name="files"
          >
            <Upload
              listType="picture-card"
              headers={{ 'content-type': 'multipart/form-data' }}
              fileList={fileList}  //存已上傳到頁面的圖片列表
              onPreview={this.handlePreview} //點(diǎn)擊文件鏈接或預(yù)覽圖標(biāo)時(shí)的回調(diào)
              onChange={this.handleChange}  //刪除或者新上傳時(shí)的回調(diào)
              beforeUpload={() => false}  //上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 `false` 則停止上傳。我們采用手動(dòng)上傳。
            >
              {fileList.length >= 1 ? null : (
                <div>
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>上傳</div>
                </div>
              )}
            </Upload>
          </Form.Item>

handlePreview = (file) => {
    this.setState({
      previewImage: file.thumbUrl,
      previewVisible: true
    });
  };
handleChange = ({ fileList }) => {
    this.setState({ fileList });
  };

onFinish = (values) => {
    const { fileList } = this.state;
    const formData = new FormData();
      delete values.files; //刪除表單內(nèi)的圖片對(duì)象
      for (const key in values) {
        if (values[key] !== undefined && values[key] !== null) {
          formData.append(key, values[key]);
        }
      } //對(duì)于其他表單對(duì)象，可以直接上傳
      fileList.forEach((item) => formData.append('files', utils.transferFile(item.thumbUrl)));
  };

  let { image } = res.data.data;
  let imgArr = image.map((item) => {
    return { thumbUrl: 'data:image/png;base64,' + item };
  });
  this.setState({
    fileList: imgArr
  });