// render
// 配置
const fileProps = {
multiple: false,
name: 'files',
action:'/upload', /*后端地址*/
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,
};
// 拖拽组件
<Upload.Dragger
{...fileProps}
>
<p className="ant-upload-drag-icon">
<Icon type="inbox"/>
</p>
<p className="ant-upload-text">点击 或者 拖拽到此区域进行上传</p>
</Upload.Dragger>
// 上传
handleUpload = () => {
const {fileList} = this.state;
this.props.form.validateFields((errors, values: Department) => {
if (errors) {
return;
}
const formData = new FormData();
fileList.forEach((file) => {
formData.append('files', file);
formData.append('后端接受的额外字段', 额外字段 + '');
//额外字段 + '' 转化成string
});
this.setState({
uploading: true,
});
this.props.dispatch({
type: '/upload',
payload: formData,
}).then(
(res) => {
this.setState({
uploading: false,
});
if (res && res.data && res.data.result) {
this.setState({
fileList: [],
});
Notification.success('上传成功');
this.setState({
visible: false,
});
this.loadList();
} else if (res && res.data && res.data.result === false) {
Notification.error(res.data.msg);
}
},
() => {
Notification.error('上传失败');
}
);
})
};
if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
if (newOptions.params instanceof FormData) {
newOptions.body = newOptions.params;
} else {
newOptions.headers = {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=utf-8'
};
newOptions.body = JSON.stringify(newOptions.params);
}
} else{