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


Posted in Javascript onMay 28, 2018

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

先来看一下微信小程序的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里面根据要上传的数量循环上传。

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

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

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
js自定义回调函数
2015/12/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
Vue实现简易计算器
2020/02/25 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python实现Const详解
2015/01/27 Python
Python 的AES加密与解密实现
2019/07/09 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
django中ImageField的使用详解
2020/12/21 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
人力资源经理自我评价
2014/01/04 职场文书
创业计划书模版
2014/02/05 职场文书
公司新年寄语
2014/04/04 职场文书
药剂专业求职信
2014/06/20 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python