微信小程序填坑:上传头像;wx.chooseImage,wx.uploadFile

2023-12-18 22:38

本文主要是介绍微信小程序填坑:上传头像;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);}}





这篇关于微信小程序填坑:上传头像;wx.chooseImage,wx.uploadFile的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/510002

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

Java文件上传的多种实现方式

《Java文件上传的多种实现方式》文章主要介绍了文件上传接收接口的使用方法,包括获取文件信息、创建文件夹、保存文件到本地的两种方法,以及如何使用Postman进行接口调用... 目录Java文件上传的多方式1.文件上传接收文件接口2.接口主要内容部分3.postman接口调用总结Java文件上传的多方式1