antd upload手动上传_antd 手动上传文件

先说我要实现的效果：我想用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 (

导入兑换码列表

this.handleCancel(e)}>

取消

this.submit(e)}>

确定

)