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


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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
关于使用js算总价的问题
Jun 23 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
基于python操作ES实例详解
2019/11/16 Python
python字符串的拼接方法总结
2019/11/18 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
《绿色蝈蝈》教学反思
2014/03/02 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
小班教师个人总结
2015/02/05 职场文书
雷锋的观后感
2015/06/10 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
反邪教学习心得体会
2016/01/15 职场文书
《风筝》教学反思
2016/02/23 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
python开发飞机大战游戏
2021/07/15 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技