通过将图片文件转换成Base64编码实现ajax提交图片

背景：最近在开发的一个H5app中更改用户头像的需求，需要通过ajax来上传头像图片，于是使用图片转换成base64编码的方式来上传图片。当然我们需要在后台将上传的base64编码在转换成图片，保存在服务器哈。下面就是实现代码，具体源码会在评论里给出地址。

前端代码：

                //上传头像图片 
		function uploadHead(imgPath) {
			console.log("imgPath = " + imgPath);
			var image = new Image();
			image.onload = function() {
				var imgData = getBase64Image(image);
				/*在这里调用上传接口*/
				mui.ajax($serverPath + "app/modifyHead", {
					data: {
						'imgData': imgData,
						'userId': plus.storage.getItem("userId")
					},
					dataType: 'json',
					type: 'post',
					timeout: 10000,
					success: function(data) {
						if(data.result == 'yes') {
							$newHead = data.newHeadPath;
							console.log('上传成功！！！！！！！！！！' + $newHead);
							plus.storage.setItem("userHead", $newHead);
							mui.toast("头像修改成功！");
						} else {
							mui.toast("头像上传失败！");
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast('网络异常，请稍后再试！');
					}
				});
			}
			image.src = imgPath;
			image.style.width = "60px";
			image.style.height = "60px";
			console.log("haha");
		}
		//将图片压缩转成base64 
		function getBase64Image(img) {
			var canvas = document.createElement("canvas");
			var width = img.width;
			var height = img.height;
			// calculate the width and height, constraining the proportions 
			if(width > height) {
				if(width > 100) {
					height = Math.round(height *= 100 / width);
					width = 100;
				}
			} else {
				if(height > 100) {
					width = Math.round(width *= 100 / height);
					height = 100;
				}
			}
			canvas.width = width; /*设置新的图片的宽度*/
			canvas.height = height; /*设置新的图片的长度*/
			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0, width, height); /*绘图*/
			var dataURL = canvas.toDataURL("image/png", 0.8);
			return dataURL.replace("data:image/png;base64,", "");
		}

后端代码：

该方法是将图片文件转化为字节数组字符串，并对其进行Base64编码处理

public static String GetImageStr(String imgFilePath) {// 将图片文件转化为字节数组字符串，并对其进行Base64编码处理
        byte[] data = null;
        
        // 读取图片字节数组
        try {
            InputStream in = new FileInputStream(imgFilePath);
            data = new byte[in.available()];
            in.read(data);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        // 对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);// 返回Base64编码过的字节数组字符串
    }

该方法是对字节数组字符串进行Base64解码并生成图片

public static boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片
        if (imgStr == null) // 图像数据为空
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            // Base64解码
            byte[] bytes = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < bytes.length; ++i) {
                if (bytes[i] < 0) {// 调整异常数据
                    bytes[i] += 256;
                }
            }
            // 生成jpeg图片
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(bytes);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            return false;
        }
    }

上述代码即可实现ajax提交图片到后台保存啦