转载一部分。自己写了一部分。
由于近来公司根据公司产品重写之前用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;
}
}
前端基本效果如下:
如果要用,可以稍作修改。