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


Posted in Javascript onJune 19, 2020

几乎每个程序都需要用到图片,在小程序中我们可以通过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<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);
 }

}

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

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

Javascript 相关文章推荐
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Ant Design的Table组件去除
Oct 24 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
微信小程序实现上传图片功能
May 28 #Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
为你总结一些php信息函数
2015/10/21 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python调用百度REST API实现语音识别
2018/08/30 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
Java编程面试题
2016/04/04 面试题
军训感想500字
2014/02/20 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
电影圆明园观后感
2015/06/03 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
MySQL 5.7常见数据类型
2021/07/15 MySQL
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫