先說我要實現的效果：我想用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)}>

確定

)

總結

以上是生活随笔為你收集整理的antd upload手动上传_antd 手动上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。