問題描述

因為 input type=‘file’ 再次點擊會將之前的fileList覆蓋，所以我先將選中的文件轉成base64作為預覽圖片，類似于這樣，可以多次添加

但是我在上傳的時候如何將多個預覽圖片添加到 formdata 對象中，后臺接受參數是一個 MultipartFile[] files 數組。

下面是我的錯誤做法：

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上傳，但是后臺沒有接受到 files 參數。

問題解答

可以有以下幾種做法：

$.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);});

都應該可以在后臺接收到文件。而具體用哪種做法要看你后臺所使用的語言和框架。

就PHP而言，我喜歡最后一種，可以用 $_FILES 一次遍歷就能獲取到所有的文件/圖片。

每次把文件轉出base64的時候，順帶也出個blob，順手append到你的formData結構里就行了。

另外我記得input可以支持多選的吧？

你先F12在network里面看看這條請求里面的參數有沒有