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


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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Vue创建头部组件示例代码详解
Oct 23 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
JS中的模糊查询功能
Dec 08 Javascript
react基本安装与测试示例
Apr 27 Javascript
vue使用过滤器格式化日期
Jan 20 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python入门教程 python入门神图一张
2018/03/05 Python
PyQt5每天必学之组合框
2018/04/20 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python实现的Iou与Giou代码
2020/01/18 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
高三励志标语
2014/06/05 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
个人合伙协议书范本
2014/10/14 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
公司辞职信模板
2015/05/13 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
python游戏开发Pygame框架
2022/04/22 Python