先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数
我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传。
Q1:附加参数怎么传到后台(我知道自动上传的话用data,但是手动上传的时候用data传不过去)
Q2:文件流要怎么传给后台啊?
我直接将获取到的filelist加上附加参数,组成json对象,传过去之后,后台报“request has no multipart/form-data Content-Type”的错。
下面是我的代码
submit() {
const { fileList, beginTime, endTime } = this.state;
const sendData = {
file: fileList[0], // 一次只上传一个文件
beginTime: parseInt(beginTime, 0),
endTime: parseInt(endTime, 0),
};
// console.log(fileList);
Service.uploadCode(JSON.stringify(sendData))
.then((res) => {
this.setState({
fileList: [],
// buttonDisabled: true,
});
console.log(res);
})
.catch((err) => {
console.log(err);
});
}
render() {
const self = this;
const {
uploadLoading,
submitLoading,
buttonDisabled,
beginTime,
endTime,
} = this.state;
const uploadProps = {
action: '/api/v1/productExchangeCode/import',
onRemove: (file) => {
this.setState(({ fileList }) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: (file) => {
console.log(file);
if (file.name.split('.')[1] !== 'xlsx') {
message.error('只能上传.xls或者.xlsx文件!', 3);
return false;
} else {
if (!beginTime || !endTime) {
Modal.warning({
title: '信息不完整',
content: '请填写有效期',
});
return false;
}
self.setState(({ fileList }) => ({
buttonDisabled: true,
fileList: [...fileList, file],
}), () => {
console.log(this.state.fileList);
});
return false;
}
},
fileList: this.state.fileList,
};
return (<div>
<div>
<Upload {...uploadProps}>
<Button disabled={buttonDisabled} loading={uploadLoading}>
<Icon type="upload" />导入兑换码列表
</Button>
</Upload>
</div>
<Button type="default" size="large" onClick={e => this.handleCancel(e)}>
取消
</Button>
<Button type="primary" size="large" loading={submitLoading} onClick={e => this.submit(e)}>
确定
</Button>
</div>)
请问找到解决办法了么?我也是来找答案的!