当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序上传图片功能（附后端代码）

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

2019年06月05日  | 移动技术网IT编程  | 我要评论

雀嘴鳝,99se,我老婆是学生会长第二季无修

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网