新闻  |   论坛  |   博客  |   在线研讨会
HTML5视频教程之微信小程序图片上传(附后端代码)分享
扣丁学堂2 | 2021-02-22 11:13:54    阅读:1596   发布文章

今天扣丁学堂小编给大家详细介绍一下关于HTML5视频教程微信小程序上传图片功能及后端代码,几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片,当然小程序也是可以上传图片的,微信小程序文档也写的很清楚。下面我们来一起看一下吧。


通过wx.chooseImage(OBJECT)实现

官方示例代码

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


图片最多可以选择9张,也可以通过拍摄照片实现,当选择完图片之后会获取到图片路径,这个路径在本次启动期间有效。

如果需要保存就需要用wx.saveFile(OBJECT)

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

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

官方示例代码

wx.chooseImage({
success:function(res){
vartempFilePaths=res.tempFilePaths
wx.uploadFile({
url:'http://www.codingke.com/upload',//仅为示例,非真实的接口地址
filePath:tempFilePaths[0],
name:'file',
formData:{
'user':'test'
},
success:function(res){
vardata=res.data
//dosomething
}
})
}
})


示例代码

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

  importconstantfrom'../../common/constant';
  Page({
  data:{
  src:"../../image/photo.png",//绑定image组件的src
  //略...
  },
  onLoad:function(options){
  //略...
  },
  uploadPhoto(){
  varthat=this;
  wx.chooseImage({
  count:1,//默认9
  sizeType:['compressed'],//可以指定是原图还是压缩图,默认二者都有
  sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
  success:function(res){
  //返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  vartempFilePaths=res.tempFilePaths;
  upload(that,tempFilePaths);
  }
  })
  }
  })
  functionupload(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;
  }
  vardata=res.data
  page.setData({//上传成功修改显示头像
  src:path[0]
  })
  },
  fail:function(e){
  console.log(e);
  wx.showModal({
  title:'提示',
  content:'上传失败',
  showCancel:false
  })
  },
  complete:function(){
  wx.hideToast();//隐藏Toast
  }
  })
  }


后端代码

  publicclassFileUploadServletextendsHttpServlet{
  privatestaticfinallongserialVersionUID=1L;
  privatestaticLoggerlogger=LoggerFactory.getLogger(FileUploadServlet.class);
  publicFileUploadServlet(){
  super();
  }
  protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
  JsonMessage<Object>message=newJsonMessage<Object>();
  EOSResponseeosResponse=null;
  StringsessionToken=null;
  FileItemfile=null;
  InputStreamin=null;
  ByteArrayOutputStreamswapStream1=null;
  try{
  request.setCharacterEncoding("UTF-8");
  //1、创建一个DiskFileItemFactory工厂
  DiskFileItemFactoryfactory=newDiskFileItemFactory();
  //2、创建一个文件上传解析器
  ServletFileUploadupload=newServletFileUpload(factory);
  //解决上传文件名的中文乱码
  upload.setHeaderEncoding("UTF-8");
  //1.得到FileItem的集合items
  List<FileItem>items=upload.parseRequest(request);
  logger.info("items:{}",items.size());
  //2.遍历items:
  for(FileItemitem:items){
  Stringname=item.getFieldName();
  logger.info("fieldName:{}",name);
  //若是一个一般的表单域,打印信息
  if(item.isFormField()){
  Stringvalue=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);
  }
  StringuserId=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=newByteArrayOutputStream();
  in=file.getInputStream();
  byte[]buff=newbyte[1024];
  intrc=0;
  while((rc=in.read(buff))>0){
  swapStream1.write(buff,0,rc);
  }
  Usrusr=newUsr();
  usr.setObjectId(Integer.parseInt(userId));
  finalbyte[]bytes=swapStream1.toByteArray();
  eosResponse=ServerProxy.getSharedInstance().saveHeadPortrait(usr,newRequestOperation(){
  @Override
  publicvoidaddValueToRequest(EOSRequestrequest){
  request.addMedia("head_icon_media",newEOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG,bytes));
  }
  });
  //请求成功的场合
  if(eosResponse.getCode()==0){
  message.setStatus(ConstantUnit.SUCCESS);
  }else{
  message.setStatus(String.valueOf(eosResponse.getCode()));
  }
  }
  }catch(Exceptione){
  e.printStackTrace();
  }finally{
  try{
  if(swapStream1!=null){
  swapStream1.close();
  }
  }catch(IOExceptione){
  e.printStackTrace();
  }
  try{
  if(in!=null){
  in.close();
  }
  }catch(IOExceptione){
  e.printStackTrace();
  }
  }
  PrintWriterout=response.getWriter();
  out.write(JSONObject.toJSONString(message));
  }
  protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
  doGet(request,response);
  }
  }


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

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

以上就是关于扣丁学堂HTML5视频教程之微信小程序图片上传及源码的全部内容,希望对大家的学习有所帮助,想要了解更多内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂是专业的HTML5培训机构,不仅有专业的老师和与时俱进的课程体系,还有大量的HTML5在线教程供学员挂看学习哦。扣丁学堂H5技术交流群:692172929。微信号:codingbb

*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。

参与讨论
登录后参与讨论
推荐文章
最近访客