html5规定数量手机拍照、选择相册照片base64编码上传

转载一部分。自己写了一部分。

由于近来公司根据公司产品重写之前用mui开发的APP，需要加一个手机上传照片功能，无奈没有经验故上网查找。

找到一个前端的例子，地址：点击打开链接

地址中可以下载前端部分的一个demo项目，如地址丢失或文件无法下载，可以联系我。

之前没有接触过base64解码编码，这里特指上传图片。如果没了解过，可以随便了解一下即可。

前面已经说了前端部分，这里放一下后台。

实体类：

public class W_m_pic {
	private String pic;

	public String getPic() {
		return pic;
	}

	public void setPic(String pic) {
		this.pic = pic;
	}

}

Controller：

package com.app.mobile.controller;
import java.beans.IntrospectionException;
import java.io.ByteArrayInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.text.ParseException;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.codec.binary.Base64;
import org.codehaus.jackson.JsonParseException;
import org.codehaus.jackson.map.JsonMappingException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.app.base.dto.GridRequestDto;
import com.app.base.model.W_m_pic;
import com.app.publicmethod.MapperFactory;




@Controller
@RequestMapping("/mobile/upload")
public class UploadController {
	
	@SuppressWarnings({ "static-access", "unchecked" })
	@RequestMapping(value = "/image.do", method = RequestMethod.POST)
	public @ResponseBody
	Map<String, Object>  base64Img(GridRequestDto dto,HttpServletRequest request,HttpServletResponse response) throws JsonParseException, JsonMappingException, IOException, IllegalAccessException, InstantiationException, InvocationTargetException, IntrospectionException, ClassNotFoundException, ParseException {
		response.setHeader("Access-Control-Allow-Origin", "*");
		Map<String, Object> rmap = new HashMap<String, Object>();
		String base64Code = request.getParameter("imgDatas");
		/*
		中间这部分代码是将从前端传过来的JSON格式的图片地址，前面说了是可以上传指定数量的照片，所以当一个集合处理，
		这里工具类的作用是将JSON转换成指定对象类型的对象集合。
		该工具类的具体实现方式可以去网上搜索一下，不难理解。
		*/
		List<W_m_pic> itemlist = (List<W_m_pic>)  MapperFactory.getInstance().convertStr3Bean(base64Code, W_m_pic.class);
		if(itemlist.size()<=0){
            rmap.put("status", false);
            rmap.put("message", "请选择图片！");
            return rmap;
        }else{
        	for(W_m_pic pic : itemlist){
        		String fileName = "C:\\Users\\zhang\\Desktop\\"+new Date().getTime()+".png";
        		try{
        			Base64 base64 = new Base64();
        			String temppic = pic.getPic().split(",")[1];
        			byte[] bytes = base64.decodeBase64(new String(temppic).getBytes());
        			ByteArrayInputStream in = new ByteArrayInputStream(bytes);
        			byte[] buffer = new byte[1024];
        			FileOutputStream out = new FileOutputStream(fileName);
        			int byteread = 0;
        			while ((byteread = in.read(buffer)) != -1) {
        				out.write(buffer, 0, byteread); // 文件写操作
        				out.flush();
        			}
        			out.close();
        		}catch (Exception e) {
        			rmap.put("status", false);
        			rmap.put("message", "上传失败！");
        			return rmap;
        		}
        	}
        	rmap.put("status", true);
        	rmap.put("message", "上传成功！");
        }
        return rmap;
	}
}

前端基本效果如下：

如果要用，可以稍作修改。