javascript - 如何使用formData上傳file數(shù)組
問題描述
因?yàn)?input type=‘file’ 再次點(diǎn)擊會(huì)將之前的fileList覆蓋,所以我先將選中的文件轉(zhuǎn)成base64作為預(yù)覽圖片,類似于這樣,可以多次添加

但是我在上傳的時(shí)候如何將多個(gè)預(yù)覽圖片添加到 formdata 對(duì)象中,后臺(tái)接受參數(shù)是一個(gè) MultipartFile[] files 數(shù)組。
下面是我的錯(cuò)誤做法:
function getImgFiles() { var imgFiles = []; var imgs = $(’img’); $.each(imgs, function (i, item) {var blob = dataURItoBlob(item.src);imgFiles.push(new File([blob], item.id)); }); return imgFiles;}/** * base64->blob * @param dataURI * @returns {Blob} */function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(’,’)[1]); var mimeString = dataURI.split(’,’)[0].split(’:’)[1].split(’;’)[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString});}var formData = new FormData($(’form’).get(0));formData.append(’files’, getImgFiles());//然后使用ajax上傳,但是后臺(tái)沒有接受到 files 參數(shù)。
問題解答
回答1:可以有以下幾種做法:
$.each(getImgFiles(), function(i, file){ formData.append(’files’, file);});
$.each(getImgFiles(), function(i, file){ formData.append(’files[]’, file);});
$.each(getImgFiles(), function(i, file){ formData.append(’files_’ + i, file);});
都應(yīng)該可以在后臺(tái)接收到文件。而具體用哪種做法要看你后臺(tái)所使用的語(yǔ)言和框架。
就PHP而言,我喜歡最后一種,可以用 $_FILES 一次遍歷就能獲取到所有的文件/圖片。
回答2:每次把文件轉(zhuǎn)出base64的時(shí)候,順帶也出個(gè)blob,順手append到你的formData結(jié)構(gòu)里就行了。
另外我記得input可以支持多選的吧?
回答3:你先F12在network里面看看這條請(qǐng)求里面的參數(shù)有沒有
相關(guān)文章:
1. 我在centos容器里安裝docker,也就是在容器里安裝容器,報(bào)錯(cuò)了?2. docker不顯示端口映射呢?3. docker-compose中volumes的問題4. golang - 用IDE看docker源碼時(shí)的小問題5. 在windows下安裝docker Toolbox 啟動(dòng)Docker Quickstart Terminal 失敗!6. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問題!!7. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””8. mac里的docker如何命令行開啟呢?9. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件10. docker內(nèi)創(chuàng)建jenkins訪問另一個(gè)容器下的服務(wù)器問題

網(wǎng)公網(wǎng)安備