总结: 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"));