antd upload手动上传_antd 手动上传文件
先說(shuō)我要實(shí)現(xiàn)的效果：我想用antd 的 upload 實(shí)現(xiàn)手動(dòng)上傳文件，上傳文件時(shí)還有附加參數(shù)
我看了官網(wǎng)上說(shuō)在beforeUpload中返回false，然后通過(guò)按鈕點(diǎn)擊事件觸發(fā)上傳。
Q1：附加參數(shù)怎么傳到后臺(tái)(我知道自動(dòng)上傳的話用data，但是手動(dòng)上傳的時(shí)候用data傳不過(guò)去)
Q2：文件流要怎么傳給后臺(tái)啊？
我直接將獲取到的filelist加上附加參數(shù)，組成json對(duì)象，傳過(guò)去之后，后臺(tái)報(bào)“request has no multipart/form-data Content-Type”的錯(cuò)。
下面是我的代碼
submit() {
const { fileList, beginTime, endTime } = this.state;
const sendData = {
file: fileList[0], // 一次只上傳一個(gè)文件
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: '請(qǐng)?zhí)顚懹行?#39;,
});
return false;
}
self.setState(({ fileList }) => ({
buttonDisabled: true,
fileList: [...fileList, file],
}), () => {
console.log(this.state.fileList);
});
return false;
}
},
fileList: this.state.fileList,
};
return (
導(dǎo)入兌換碼列表
this.handleCancel(e)}>
取消
this.submit(e)}>
確定
)總結(jié)
以上是生活随笔為你收集整理的antd upload手动上传_antd 手动上传文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： STK搭建铱星星座
- 下一篇： 火狐html页面空白页,火狐修改空白新标