文件数组上传

1 思路

（1）获取手机本地需要上传的文件

（2）将文件转为base64码

（3）将base64码转为文件

（4）将文件组织进入数组中，上传文件数组

2 代码片段

2.1 总体调用

function uploadImg() {
	file1Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1462-242D66C8465F496DBB5B7FFE52E02D41.jpg"
	);
	file1Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1462-307744A338D3487DAD46B87777D0D361.jpg"
	);

	file2Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1462-242D66C8465F496DBB5B7FFE52E02D41.jpg"
	);
	file2Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1462-307744A338D3487DAD46B87777D0D361.jpg"
	);

	file3Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-05-2.3.1462-66F8BA72C59A4F8B98364688657DA746.jpg"
	);
	file3Arr.push(
		"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-05-2.3.1462-1BB212EC1D3045818F34F1143ECABAD7.jpg"
	);

	getImgToBase64(file1Arr, file1_data_arr, file1Arr.length, 0);
}

2.2 将图片转换为Base64文件

2.2.1 总体调用

function getImgToBase64(arr, file_data_arr, size, index) {
	for (var i = 0; i < arr.length; i++) {
		loadImage(arr[i]).then(function(file) {
				file_data_arr.push(file);
				console.log(file.name);
				console.log("+++" + file_data_arr);

				if (file_data_arr.length == size) {
					if (index == 0) {
						getImgToBase64(file2Arr, file2_data_arr, file2Arr.length, 1);
					} else if (index == 1) {
						getImgToBase64(file3Arr, file3_data_arr, file3Arr.length, 2);
					} else if (index == 2) {
						upload();
					}
				}

			})
			.catch(function(reason, data) {
				console.log('catch到rejected失败回调');
				console.log('catch失败执行回调抛出失败原因：', reason);
			});
	}
}

2.2.2 辅助函数

function loadImage(file) {
	return new Promise(function(resolve, reject) {
		var canvas = document.createElement('canvas'),
			ctx = canvas.getContext('2d'),
			img = new Image;
		img.crossOrigin = 'Anonymous';

		img.onload = function() {
			var originWidth = img.width;
			var originHeight = img.height;
			// 最大尺寸限制
			var maxWidth = app.maxWidth(),
				maxHeight = app.maxWidth();
			// 目标尺寸
			var targetWidth = originWidth,
				targetHeight = originHeight;
			// 图片尺寸超过1000x1000的限制
			if (originWidth > maxWidth || originHeight > maxHeight) {
				if (originWidth / originHeight > maxWidth / maxHeight) {
					targetWidth = maxWidth;
					targetHeight = Math.round(maxWidth * (originHeight / originWidth));
				} else {
					targetHeight = maxHeight;
					targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				}
			}

			// canvas对图片进行缩放
			canvas.width = targetWidth;
			canvas.height = targetHeight;

			// 清除画布
			ctx.clearRect(0, 0, targetWidth, targetHeight);
			// 图片压缩
			ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

			ctx.font = targetWidth / 20 + "px microsoft yahei";
			ctx.fillStyle = "rgba(255,128,0,1)";
			var txt = save_time ? save_time : current_time
			var pos_x = targetWidth - ctx.measureText(txt).width
			var pos_y = targetHeight - targetWidth / 20

			ctx.fillText(txt, pos_x, pos_y);
			// console.log(targetWidth, targetHeight)
			var dataURL = canvas.toDataURL('image/jpeg');

			var arr = file.split("/");
			resolve(dataURLtoFile(dataURL, arr[arr.length - 1]));

			canvas = null;
		};

		img.src = file;
	})
}

//将base64转换为文件
function dataURLtoFile(dataurl, filename) {
	var arr = dataurl.split(','),
		mime = arr[0].match(/:(.*?);/)[1],

		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	//					console.log(mime)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new File([u8arr], filename, {
		type: mime
	});
}

2.3 上传文件数组

function upload(url) {
	var xhr = new XMLHttpRequest();
	xhr.timeout = 120000;
	xhr.ontimeout = function(e) {
		mui.toast('请求超时，请再网络状态良好的地方重试');
		upload.close()
	};

	var formData = new FormData();
	for (var i = 0; i < file1_data_arr.length; i++) {
		formData.append('file1', file1_data_arr[i]);
	}
	for (var i = 0; i < file2_data_arr.length; i++) {
		formData.append('file2', file2_data_arr[i]);
	}
	for (var i = 0; i < file3_data_arr.length; i++) {
		formData.append('file3', file3_data_arr[i]);
	}

	xhr.onreadystatechange = function(e) {
		if (xhr.readyState == 4) {
			console.log("--->上传结果：" + xhr.responseText)
			var ret = JSON.parse(xhr.responseText);
			if (xhr.status == 200) {

			} else {
				mui.toast(get_error_msg(ret, '上传失败，请重新保存'));
			}
			return;
		}
	}

	xhr.open('POST', url, true);
	xhr.send(formData);
}

3 后台接口

@RequestMapping("/addMainRepair")
public Result addMainRepair(HttpServletRequest request,
                            @RequestParam("file1") MultipartFile[] file1,
                            @RequestParam("file2") MultipartFile[] file2,
                            @RequestParam("file3") MultipartFile[] file3) {
    //TODO写文件入库
}

 

来源：https://blog.csdn.net/xingxingsuohun/article/details/98756535