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


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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
详解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命名空间学习详解
2014/02/27 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
js身份证验证超强脚本
2008/10/26 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
销售实习自我鉴定
2013/12/07 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
初婚初育证明
2014/01/14 职场文书
妇产医师自荐信
2014/01/29 职场文书
网络宣传方案
2014/03/15 职场文书
运动会标语
2014/06/21 职场文书
小学课外活动总结
2014/07/09 职场文书
工作检讨书范文
2015/01/23 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
高中化学教学反思
2016/02/22 职场文书
汉语拼音教学反思
2016/02/22 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技