ant design 上传文件
https://ant.design/components/upload-cn/
采用 自定义上传文件 ,如果 批量上传获取不到文件 直接看最后
点击按钮调用的方法 使用 FormData 进行上传
*需要引用import reqwest from 'reqwest';
addaOk(e) {
let {fileList} = this.state;
let that = this;
let formData = new FormData();
// 批量上传
// for(let item of fileList){
// formData.append('files', item)
// }
// 的那个上传
formData.append('files', fileList[0])
// formData.append('tm', values.tm.format('YYYY-MM-DD HH:mm'))
reqwest({
url: '/services/mountainditchmanage/insertmountainditchandproject', // 上传url
method: 'post',
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
data: formData,
success: () => {
message.success('上传成功');
// that.setState({
// fileList: [],
// })
// that.props.form.resetFields();
},
error: () => {
message.error('上传失败');
},
});
}
ant.design Upload 前台
const props = {
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: (file) => {
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
},
fileList,
};
<Upload
{...props}>
<Button>
<Icon type="upload"/>
</Button>
</Upload>
<Button style={{}} type="primary" onClick={this.addaOk.bind(this)}>确认</Button>
后台使用 MultipartFile 接受, 如果是批量 加 MultipartFile[] 单个 MultipartFile 一定要注意
(@RequestParam(value = “files”, required = true) value中的值一定要与 上传文件名称一致。。。
public Message insertMountainDitchAndProject(@RequestParam(value = "files", required = true) MultipartFile[] files) {
//判断file数组不能为空并且长度大于0
if (files != null && files.length > 0) {
//循环获取file数组中得文件
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
}
}
}
如果 你要批量上传 需要在前台 上传代码中 用循环添加file,否则后台一直获取不到文件
addaOk(e) {
let {fileList} = this.state;
let that = this;
let formData = new FormData();
// 循环添加file
for(let item of fileList){
formData.append('files', item)
}
// formData.append('files', fileList[0])
// formData.append('tm', values.tm.format('YYYY-MM-DD HH:mm'))
reqwest({
url: '/services/mountainditchmanage/insertmountainditchandproject',
method: 'post',
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
data: formData,
success: () => {
message.success('上传成功');
// that.setState({
// fileList: [],
// })
// that.props.form.resetFields();
},
error: () => {
message.error('上传失败');
},
});
}