AntD imgage Upload action自动上传&&提交上传

总结: Antd action://------,自动上传;

         beforeUpload: this.beforeUpload, 阻止自动上传, 详见以下代码.

import React from "react";
import ReactDOM from "react-dom";
import reqwest from 'reqwest';
import "antd/dist/antd.css";
import "./index.css";
import { Upload, Icon, Modal, Button, uploading,message } from "antd";

class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewView: true,
    previewImage: "",
    fileList: []
  };

  handleUpload = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('files[]', file);
      console.log(file);

    });

    this.setState({
      uploading: true,
    });

    // You can use any AJAX library you like
    reqwest({
       // 上传接口
      // url: 'http://localhost:8080/coach_manage/manage_loopPicture_uploadfile',	
      url: '//jsonplaceholder.typicode.com/posts/', 

      method: 'post',
      processData: false,
      data: formData,
      success: () => {
        this.setState({
          fileList: [],
          uploading: false,
        });
        message.success('upload successfully.');
      },
      error: () => {
        this.setState({
          uploading: false,
        });
        message.error('upload failed.');
      },
    });
  } 

  handleCancel = () => this.setState({ previewVisible: false });

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

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    const { previewVisible,previewView, previewImage, fileList } = this.state;
    const props = {
      // action: '//jsonplaceholder.typicode.com/posts/', //自动上传 antd地址

      // action: 'http://localhost:8080/coach_manage/manage_loopPicture_uploadfile',
      // action: '',
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      // beforeUpload: (file) => {
      //   this.setState(({ fileList }) => ({
      //     fileList: [...fileList, file],
      //   }));
      //   return false;
      // },
      fileList: this.state.fileList,
      beforeUpload: this.beforeUpload,
      listType:"picture-card",
      // fileList: fileList ,
      onPreview: this.handlePreview ,
      onChange: this.handleChange ,

    }
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Modal
          title="添加图片"
          visible={previewView}
          // footer={null}
          // onOk={this.handleOk}
          onCancel={this.handleCancelModal}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>
              Return
            </Button>,
            <Button
              key="submit"
              type="primary"
              size="large"
              // loading={loading}
              // onClick={this.handleOk}
              onClick={this.handleUpload}
              disabled={this.state.fileList.length === 0}
              loading={uploading}
            >
              Submit
            </Button>
          ]}
        >
          <Upload{...props}           
          >
            {fileList.length >= 1 ? null : uploadButton}
          </Upload>
          <Modal
            visible={previewVisible}
            footer={null}
            onCancel={this.handleCancel}
          >
            <img alt="example" style={{ width: "100%" }} src={previewImage} />
          </Modal>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<PicturesWall />, document.getElementById("container"));