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


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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
JS实现炫酷轮播图
Nov 15 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
一个PHP分页类的代码
2011/05/18 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
python获取网页状态码示例
2014/03/30 Python
Python生成随机MAC地址
2015/03/10 Python
python 内置模块详解
2019/01/01 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python 在局部变量域中执行代码
2020/08/07 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
初一语文教学反思
2016/03/03 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Python作用域和名称空间的详细介绍
2022/04/13 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技