热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序上传图片功能(附后端代码)

这篇文章主要为大家详细介绍了微信小程序上传图片功能,还为大家分享了后端代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片。

当然小程序也是可以上传图片的,微信小程序文档也写的很清楚。

上传图片

首先选择图片

通过wx.chooseImage(OBJECT)实现

官方示例代码

wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 var tempFilePaths = res.tempFilePaths
 }
})

图片最多可以选择9张, 也可以通过拍摄照片实现,当选择完图片之后会获取到图片路径, 这个路径在本次启动期间有效。
如果需要保存就需要用wx.saveFile(OBJECT)

上传图片

通过wx.uploadFile(OBJECT) 可以将本地资源文件上传到服务器。

原理就是客户端发起一个 HTTPS POST 请求,其中 content-type为 multipart/form-data。

官方示例代码

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths
 wx.uploadFile({
 url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
 filePath: tempFilePaths[0],
 name: 'file',
 formData:{
 'user': 'test'
 },
 success: function(res){
 var data = res.data
 //do something
 }
 })
 }
})

示例代码

看完了官方文档, 写一个上传图片就没有那么麻烦了,下面是真实场景的代码

import constant from '../../common/constant';
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
 }
 })
}

后端代码

后端是用java写的,一开始的时候,后端开始用了一些框架接收上传的图片,出现了各种问题,后来使用了纯粹的Servlet就没有了问题, 把代码贴出来省的以后麻烦了。

注意: 代码使用了公司内部的框架,建议修改后再使用

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 message = new JsonMessage();
 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 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);
 }

}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 在线教育平台的搭建及其优势
    在线教育平台的搭建对于教育发展来说是一次重大进步。未来在线教育市场前景广阔,但许多老师不知道如何入手。本文介绍了在线教育平台的搭建方法以及与传统教育相比的优势,包括时间、地点、空间的灵活性,改善教育不公平现象以及个性化教学的特点。在线教育平台的搭建将为学生提供更好的教育资源,解决教育不公平的问题。 ... [详细]
  • Java太阳系小游戏分析和源码详解
    本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 怎么在PHP项目中实现一个HTTP断点续传功能发布时间:2021-01-1916:26:06来源:亿速云阅读:96作者:Le ... [详细]
  • 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
author-avatar
坏坏不贱_233
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有