javascript - 如何使用formData上传file数组

问题描述

因为 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里面看看这条请求里面的参数有没有