Antd多文件上傳后臺(tái)接收為null問(wèn)題
在使用antd開(kāi)發(fā)過(guò)程中，Upload組件的上傳，一般是通過(guò)action配置后端接口地址，自動(dòng)上傳文件；但是當(dāng)文件數(shù)量較多時(shí)，需要進(jìn)行手動(dòng)上傳，但是手動(dòng)上傳后臺(tái)一直無(wú)法接收到數(shù)據(jù)，數(shù)據(jù)為null。

代碼實(shí)現(xiàn)
前段組件代碼如下：

const onRemove = (file) => {this.setState((state) => {const index = state.fileList.indexOf(file);const newFileList = state.fileList.slice();newFileList.splice(index, 1);return {fileList: newFileList,};});};const beforeUpload = (file) => {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('請(qǐng)上傳圖片格式文件!');return isJpgOrPng || Upload.LIST_IGNORE;}this.setState(state => ({fileList: [...state.fileList, file],}));return false;};<UploadfileList={fileList}onRemove={onRemove}beforeUpload={beforeUpload}directoryaccept=".png,.jpg,.jpeg"showUploadList={false}onChange={this.onChange}><Buttonicon={<UploadOutlined />}>Click to upload</Button></Upload> 復(fù)制代碼

前端上傳邏輯代碼：

const formData = new FormData();// 組裝數(shù)據(jù)fileList.forEach((file) => {formData.append('files', file);});formData.append('id', galleryId);// 保存圖片請(qǐng)求接口reqwest({// 上傳urlurl: 'url',method: 'post',// 必須false才會(huì)避開(kāi)jQuery對(duì) formdata 的默認(rèn)處理processData: false, // 必須false才會(huì)自動(dòng)加上正確的Content-Type contentType: false, data: formData,success: (res) => {message.success('上傳圖片成功');},error: () => {message.error('上傳圖片失敗');},}); 復(fù)制代碼

后端代碼：

public Message insertPic(@RequestParam(value = "files", required = true) MultipartFile[] files) {// 判斷file數(shù)組不能為空并且長(zhǎng)度大于0if (files != null && files.length > 0) {//循環(huán)獲取file數(shù)組中得文件for (int i = 0; i < files.length; i++) {MultipartFile file = files[i];}}}復(fù)制代碼

分析
F12查看請(qǐng)求頭：

F12查看入?yún)?#xff1a;

因?yàn)榻涌谑强梢哉{(diào)通的，我一直以為是后端在處理數(shù)據(jù)時(shí)，將數(shù)據(jù)轉(zhuǎn)換成null,

解決
百度之后：
定義文件解析器MultipartResolver的時(shí)候，有沒(méi)有設(shè)置resolveLazily屬性為true（默認(rèn)值為false）。可能是MultipartResolver在initBinder的時(shí)候默認(rèn)會(huì)自動(dòng)解析request，并清空文件流里的內(nèi)容，導(dǎo)致在controller中的request獲取不到文件流信息。 但是按照網(wǎng)上進(jìn)行相關(guān)設(shè)置之后，還是不行，仍然為null。

當(dāng)用postman進(jìn)行接口測(cè)試時(shí)，竟然可以了，我意識(shí)到可能并不是后端的問(wèn)題，又仔細(xì)看了一下請(qǐng)求頭、入?yún)?#xff0c;發(fā)現(xiàn)傳送的參數(shù)類型是[object Object]，打斷點(diǎn)查看fileList：

原來(lái)fileLsit不是File對(duì)象數(shù)組，originFileObj才是真正的File。修改代碼：

fileList.forEach((file) => {formData.append('files', file.originFileObj, file.name);}); 復(fù)制代碼

果然成功了，終于淚流滿對(duì)面啊～～～，查看入?yún)?/p>

總結(jié)
仔細(xì)查看antd文檔

FileList確實(shí)是一個(gè)File對(duì)象數(shù)組

但是仔細(xì)閱讀FAQ發(fā)現(xiàn)

最后
如果你覺(jué)得此文對(duì)你有一丁點(diǎn)幫助，點(diǎn)個(gè)贊。或者可以加入我的開(kāi)發(fā)交流群：1025263163相互學(xué)習(xí)，我們會(huì)有專業(yè)的技術(shù)答疑解惑

如果你覺(jué)得這篇文章對(duì)你有點(diǎn)用的話，麻煩請(qǐng)給我們的開(kāi)源項(xiàng)目點(diǎn)點(diǎn)star:http://github.crmeb.net/u/defu不勝感激 ！

PHP學(xué)習(xí)手冊(cè)：https://doc.crmeb.com
技術(shù)交流論壇：https://q.crmeb.com

總結(jié)

以上是生活随笔為你收集整理的Antd多文件上传后台接收为null问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。