微信小程序填坑：上传头像；wx.chooseImage，wx.uploadFile

本文主要是介绍微信小程序填坑：上传头像；wx.chooseImage，wx.uploadFile，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因为wx.chooseImage，wx.uploadFile的组合十分常见，并且极其容易遇到坑；请作者来检查一下是否有问题，因为我看到原文底下有一堆不明代码。。。

上传头像, 使用wx.chooseImage({})后在使用wx.uploadFile({})结合起来使用.

http://www.wxapp-union.com/portal.php?mod=view&aid=907

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3454

wx.uploadFile（上传文件）相关问题

示例代码：


Page({data: {src: "../../image/photo.png",  //绑定image组件的src//略...
  },onLoad: function (options) {//略... 
  },uploadPhoto() {var that = this; wx.chooseImage({count: 1, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;upload(that, tempFilePaths);}})}
})function upload(page, path) {wx.showToast({icon: "loading",title: "正在上传"}),wx.uploadFile({url: constant.SERVER_URL + "/FileUploadServlet",filePath: path[0], name: 'file',header: { "Content-Type": "multipart/form-data" },formData: {//和服务器约定的token, 一般也可以放在header中'session_token': wx.getStorageSync('session_token')},success: function (res) {console.log(res);if (res.statusCode != 200) { wx.showModal({title: '提示',content: '上传失败',showCancel: false})return;}var data = res.datapage.setData({  //上传成功修改显示头像src: path[0]})},fail: function (e) {console.log(e);wx.showModal({title: '提示',content: '上传失败',showCancel: false})},complete: function () {wx.hideToast();  //隐藏Toast
      }})
}







后端代码

public class FileUploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class);public FileUploadServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {JsonMessage<Object> message = new JsonMessage<Object>();EOSResponse eosResponse = null;String sessionToken = null;FileItem file = null;InputStream in = null;ByteArrayOutputStream swapStream1 = null;try {request.setCharacterEncoding("UTF-8"); //1、创建一个DiskFileItemFactory工厂  DiskFileItemFactory factory = new DiskFileItemFactory();  //2、创建一个文件上传解析器  ServletFileUpload upload = new ServletFileUpload(factory);//解决上传文件名的中文乱码  upload.setHeaderEncoding("UTF-8");   // 1. 得到 FileItem 的集合 items  List<FileItem> items = upload.parseRequest(request);logger.info("items:{}", items.size());// 2. 遍历 items:  for (FileItem item : items) {  String name = item.getFieldName();  logger.info("fieldName:{}", name);// 若是一个一般的表单域, 打印信息  if (item.isFormField()) {  String value = item.getString("utf-8");  if("session_token".equals(name)){sessionToken = value;}}else {if("file".equals(name)){file = item;}}  }//session校验if(StringUtils.isEmpty(sessionToken)){message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);}String userId = RedisUtils.hget(sessionToken,"userId");logger.info("userId:{}", userId);if(StringUtils.isEmpty(userId)){message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);}//上传文件if(file == null){}else{swapStream1 = new ByteArrayOutputStream();in = file.getInputStream();byte[] buff = new byte[1024];int rc = 0;while ((rc = in.read(buff)) > 0) {swapStream1.write(buff, 0, rc);}Usr usr = new Usr();usr.setObjectId(Integer.parseInt(userId));final byte[] bytes = swapStream1.toByteArray();eosResponse= ServerProxy.getSharedInstance().saveHeadPortrait(usr, new RequestOperation() {@Overridepublic void addValueToRequest(EOSRequest request) {request.addMedia("head_icon_media", new EOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG, bytes));}});// 请求成功的场合if (eosResponse.getCode() == 0) {message.setStatus(ConstantUnit.SUCCESS);} else {message.setStatus(String.valueOf(eosResponse.getCode()));}}} catch (Exception e) {e.printStackTrace();} finally{try {if(swapStream1 != null){swapStream1.close();}} catch (IOException e) {e.printStackTrace();}try {if(in != null){in.close();}} catch (IOException e) {e.printStackTrace();}}PrintWriter out = response.getWriter();  out.write(JSONObject.toJSONString(message));  }protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}