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


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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php静态文件生成类实例分析
2015/01/03 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
yii分页组件用法实例分析
2015/12/28 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
大学毕业生通用求职信
2013/09/28 职场文书
公司成立感言
2014/01/11 职场文书
环境卫生标语
2014/06/09 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
金融管理专业求职信
2014/07/10 职场文书
身边的榜样活动方案
2014/08/20 职场文书
商品陈列协议书
2014/09/29 职场文书