1、UI
2、代码
import React from 'react';
import { Upload, Button, Input } from 'antd';
import axios from 'axios';
const { TextArea } = Input;
class Post extends React.Component {
state = {
fileList: [],//文件列表
textAreaValue: '',//文本值
};
//发布
handleUpload = () => {
const { fileList, textAreaValue } = this.state;
const formData = new FormData();
fileList.forEach((file) => {
formData.append('files[]', file);
});
formData.append('text', textAreaValue);
axios.post(
'xxx',//接口url
formData,
{ headers: { 'Content-Type': 'multipart/form-data' } },
);
/*也可以使用dispatch发请求,不过要注意根据不同项目中axios封装情况添加contentType
this.props.dispatch({
type:'post/submit',//model中的方法
payload:formData,
});*/
};
//获取textArea值
handleGetValue = (event) => {
this.setState({
textAreaValue: event.target.value,
});
};
render() {
const props = {
//移除文件
onRemove: (file) => {
const { fileList } = this.state;
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
this.setState({
fileList: newFileList,
});
},
//上传文件前操作
beforeUpload: (file) => {
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
},
};
return (
<div>
<div style={{marginTop:'13px',marginLeft:'13px',width:'30%'}}>
<TextArea
autosize
value={this.state.textAreaValue}
onChange={this.handleGetValue}
maxLength="1024"/>
</div>
<div style={{marginTop:'5px',marginLeft:'13px'}}>
<Upload {...props} fileList={this.state.fileList}>
<Button>添加附件</Button>
</Upload>
</div>
<Button style={{marginTop:'5px',marginLeft:'13px'}}
onClick={this.handleUpload}>提交</Button>
</div>
);
}
}
export default Post;