微信小程序填坑之路(三)--上传头像
来源：互联网 发布：干部网络大学堂 编辑：程序博客网 时间：2024/05/16 08:59
上传头像, 使用wx.chooseImage({})后 在使用wx.uploadFile({})结合起来使用.
示例代码:
Page({ data: { src: "../../image/photo.png", //绑定image组件的src //略... }, onLoad: function (options) { //略... }, uploadPhoto() { var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['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.data page.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() { @Override public 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); }}
0 0
- 微信小程序填坑之路(三)--上传头像
- 微信小程序填坑：上传头像；wx.chooseImage，wx.uploadFile
- 微信小程序上传头像
- 微信小程序开发之新手填坑
- 微信小程序入门八头像上传
- 微信小程序入门八头像上传
- 小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
- Android之头像上传
- 小程序填坑之路：项目开发简介
- 小程序填坑之路（二）：cover-view
- 【微信小程序开发】一名Android开发者的微信小程序填坑之路（微信小程序Demo）
- 一名Android开发者的微信小程序填坑之路(1)
- 一名Android开发者的微信小程序填坑之路(2)
- 微信小程序网络请求的封装与填坑之路
- 一名Android开发者的微信小程序填坑之路(1)
- 一名Android开发者的微信小程序填坑之路(2)
- 微信小程序填坑之路（四）--2016.12.21 更新
- 一名Android开发者的微信小程序填坑之路
- 1021. 个位数统计 (15)
- APP UI设计及切图规范
- 2016.12.16回顾
- LeetCode Weekly Contest 13-HammingDistance【易】
- error C2078: 初始值设定项太多；error C2664: 不能将参数 1 从“char”转换为“const char *
- 微信小程序填坑之路(三)--上传头像
- Delphi中CoInitialize之探究
- Sqrt(x)
- IntelliJ IDEA 中 ssh的基本配置
- mobiscroll js日期插件的基本案例
- mybatis-generator扩展教程系列 -- mapper xml文件增加自定义sql
- git: push免输用户名和密码
- Delphi窗体重绘API:DrawFocusRect,SetTextColor(),GetDc,GetWindowDC,MapWindowPoints,InflateRect
- Uploadify IE出现了SCRIPT5007 缺少对象
