微信小程序实现上传图片功能

 更新时间:2018年05月28日 11:29:38   作者:李无敌  
这篇文章主要为大家详细介绍了微信小程序实现上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序图片上传,供大家参考,具体内容如下

先来看一下微信小程序的api

来看一下页面效果

查看大图

wxml文件代码:

<view class="weui-cell"> 
 <view class="weui-cell__bd"> 
  <view class="weui-uploader"> 
  <view class="weui-uploader__hd"> 
  <view class="weui-uploader__title">营业执照</view> 
  <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view> 
  </view> 
  <view class="weui-uploader__bd"> 
  <view class="weui-uploader__files"> 
  <block wx:for="{{imageList}}" wx:for-item="image"> 
   <view class="weui-uploader__file"> 
   <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> 
   </view> 
  </block> 
  </view> 
  <view class="weui-uploader__input-box"> 
  <view class="weui-uploader__input" bindtap="chooseImage"></view> 
  </view> 
  </view> 
  </view> 
 </view> 
</view> 

js文件代码

chooseImage: function () { 
 var that = this; 
 console.log('aaaaaaaaaaaaaaaaaaaa') 
 
 wx.chooseImage({ 
 count: this.data.count[this.data.countIndex], 
 success: function (res) { 
 console.log('ssssssssssssssssssssssssss') 
 //缓存下 
 wx.showToast({ 
  title: '正在上传...', 
  icon: 'loading', 
  mask: true, 
  duration: 2000, 
  success: function (ress) { 
  console.log('成功加载动画'); 
  } 
 }) 
 
 console.log(res) 
 that.setData({ 
  imageList: res.tempFilePaths 
 }) 
 //获取第一张图片地址 
 var filep = res.tempFilePaths[0] 
 //向服务器端上传图片 
 // getApp().data.servsers,这是在app.js文件里定义的后端服务器地址 
 wx.uploadFile({ 
  url: getApp().data.servsers + '/weixin/wx_upload.do', 
  filePath: filep, 
  name: 'file', 
  formData: { 
  'user': 'test' 
  }, 
  success: function (res) { 
  console.log(res) 
  console.log(res.data) 
  var sss= JSON.parse(res.data) 
  var dizhi = sss.dizhi; 
  //输出图片地址 
  console.log(dizhi); 
  that.setData({ 
  "dizhi": dizhi 
  }) 
 
  //do something 
  }, fail: function (err) { 
  console.log(err) 
  } 
  }); 
 } 
 }) 
 }, 
 previewImage: function (e) { 
 var current = e.target.dataset.src 
 
 wx.previewImage({ 
 
 current: current, 
 urls: this.data.imageList 
 }) 
 } 

java 后端代码:

//获取当前日期时间的string类型用于文件名防重复 
 public String dates(){ 
  Date currentTime = new Date(); 
  SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss"); 
  String dateString = formatter.format(currentTime); 
  return dateString; 
 } 
 @RequestMapping("wx_upload.do") 
 public void uploadPicture(HttpServletRequest request, HttpServletResponse response,PrintWriter writer) throws Exception { 
 System.out.println("进入get方法!"); 
 //获取从前台传过来得图片 
 MultipartHttpServletRequest req =(MultipartHttpServletRequest)request; 
 MultipartFile multipartFile = req.getFile("file"); 
 //获取图片的文件类型 
 String houzhu=multipartFile.getContentType(); 
 int one = houzhu.lastIndexOf("/"); 
 System.out.println(houzhu.substring((one+1),houzhu.length())); 
 System.out.println(multipartFile.getName()); 
 //根据获取到的文件类型截取出图片后缀 
 String type=houzhu.substring((one+1),houzhu.length()); 
 System.out.println(multipartFile.getContentType()); 
 
 String filename; 
 // request.getRealPath获取我们项目的根地址在加上我们要保存的地址 
 String realPath = request.getRealPath("/upload/wximg/"); 
 try { 
  File dir = new File(realPath); 
  if (!dir.exists()) { 
  dir.mkdir(); 
  } 
  //获取到当前的日期时间用户生成文件名防止文件名重复 
  String filedata=this.dates(); 
 //生成一个随机数来防止文件名重复 
  int x=(int)(Math.random()*1000); 
  filename="zhongshang"+x+filedata; 
  System.out.println(x); 
 将文件的地址和生成的文件名拼在一起 
  File file = new File(realPath,filename+"."+type); 
  multipartFile.transferTo(file); 
 //将图片在项目中的地址和isok状态储存为json格式返回给前台,由于公司项目中没有fastjson只能用这个 
  JSONObject jsonObject=new JSONObject(); 
  jsonObject.put("isok",1); 
  jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type); 
 
  writer.write(jsonObject.toString()); 
 } catch (IOException e) { 
  e.printStackTrace(); 
 } catch (IllegalStateException e) { 
  e.printStackTrace(); 
 } 
} 

来看一下之前在前端js输出的内容:

打开浏览器用我们的服务器的地址加上后台返回json的dizhi字段去访问这张图片

我们可以看到图片已经填入我们的服务器端里了,然后在打开我们服务器端项目根地址下面的/upload/wximg

到这里就大功告成了如果是多张图片上传可以在js里面根据要上传的数量循环上传。

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

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

相关文章

  • js实现3d悬浮效果

    js实现3d悬浮效果

    本文主要分享了js实现3d悬浮效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Firefox和IE浏览器兼容JS脚本写法小结

    Firefox和IE浏览器兼容JS脚本写法小结

    window.event兼容脚本 1.2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerText写法 6.长度 7.父控件下的子控件 8.XmlHttp
    2008-07-07
  • JS中通过url动态获取图片大小的方法小结(两种方法)

    JS中通过url动态获取图片大小的方法小结(两种方法)

    这篇文章主要介绍了JS中通过url动态获取图片大小的方法小结,本文给大家列举了两种方法,大家可以尝试下看哪种方法好用,感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • echarts实现响应式定位和布局

    echarts实现响应式定位和布局

    这篇文章介绍了echarts实现响应式定位和布局的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JS动态添加iframe的代码

    JS动态添加iframe的代码

    这篇文章主要介绍了JS动态添加iframe的代码,需要的朋友可以参考下
    2015-09-09
  • 解决iframe嵌套第三方网址不能访问的各种报错

    解决iframe嵌套第三方网址不能访问的各种报错

    在一些场景下,我们的网站需要通过iframe标签嵌入第三方厂家的页面,这时候就得通过iframe标签去引入需要嵌入网页的网址了,这篇文章主要给大家介绍了关于解决iframe嵌套第三方网址不能访问的各种报错,需要的朋友可以参考下
    2024-09-09
  • JavaScript实现鼠标滑过处生成气泡的方法

    JavaScript实现鼠标滑过处生成气泡的方法

    这篇文章主要介绍了JavaScript实现鼠标滑过处生成气泡的方法,涉及鼠标事件与页面样式的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JS 面向对象之神奇的prototype

    JS 面向对象之神奇的prototype

    对于初学 JavaScript 的人来说 prototype 是一种很神奇的特性,而事实上,prototype 对于 JavaScript 的意义重大,prototype 不仅仅是一种管理对象继承的机制,更是一种出色的设计思想。
    2011-02-02
  • JS设置cookie、读取cookie、删除cookie

    JS设置cookie、读取cookie、删除cookie

    Js操作Cookie总结(设置,读取,删除),工作中经常会用到的哦!下面是详细代码,如有错误,请留言指正!
    2015-04-04
  • JavaScript预解析,对象详解

    JavaScript预解析,对象详解

    这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助
    2021-11-11

最新评论