微信小程序多张图片上传功能


Posted in Javascript onJune 07, 2017

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?

这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数。

首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api

微信小程序多张图片上传功能

微信小程序多张图片上传功能

 示例代码是这样的:

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths
 wx.uploadFile({
 url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
 filePath: tempFilePaths[0],
 name: 'file',
 formData:{
 'user': 'test'
 },
 success: function(res){
 var data = res.data
 //do something
 }
 })
 }
})

这里的示例代码,是选择图片,然后上传选中的图片中的第一个图片;

现在开始写多张图片上传的例子

首先,我们还是要选择图片 

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组
 
 }
})

然后在app.js中写一个多张图片上传的方法,后面引入,你也可以写在一个JS文件中,后面引入:

//多张图片上传
 function uploadimg(data){
 var that=this,
 i=data.i?data.i:0,
 success=data.success?data.success:0,
 fail=data.fail?data.fail:0;
 wx.uploadFile({
 url: data.url, 
 filePath: data.path[i],
 name: 'fileData',
 formData:null,
 success: (resp) => {
 success++;
 console.log(resp)
 console.log(i);
 //这里可能有BUG,失败也会执行这里
 },
 fail: (res) => {
 fail++;
 console.log('fail:'+i+"fail:"+fail);
 },
 complete: () => {
 console.log(i);
 i++;
 if(i==data.path.length){ //当图片传完时,停止调用 
 console.log('执行完毕');
 console.log('成功:'+success+" 失败:"+fail);
 }else{//若图片还没有传完,则继续调用函数
 console.log(i);
 data.i=i;
 data.success=success;
 data.fail=fail;
 that.uploadimg(data);
 }
 
 }
 });
 }

多张图片上传的方法写好了,下面就是引用:

var app=getApp();
Page({
 data:{
 pics:[]
 },
 choose:function(){//这里是选取图片的方法
 var that=this;
 wx.chooseImage({
 count: 9-pic.length, // 最多可以选择的图片张数,默认9
 sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
 success: function(res){
 var imgsrc=res.tempFilePaths; 
 that.setData({
 pics:imgsrc
 });
 },
 fail: function() {
 // fail
 },
 complete: function() {
 // complete
 }
 })

 },
 uploadimg:function(){//这里触发图片上传的方法
 var pics=this.data.pics;
 app.uploadimg({
 url:'https://........',//这里是你图片上传的接口
 path:pics//这里是选取的图片的地址数组
 });
 },
 onLoad:function(options){

 }

})

刚好写了一个node上传图片代码,亲测可以使用,

一个简单的PHP接收代码:

<?php 
 $imgname = $_FILES['file']['name'];
 $tmp = $_FILES['file']['tmp_name'];
 $filepath = 'now/';//记得要自己创建这个文件夹
 if(move_uploaded_file($tmp,$filepath.$imgname.".png")){
  echo "上传成功";
 }else{
  echo "上传失败";
 }

 ?>

完结。

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

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

Javascript 相关文章推荐
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
Vue.js对象转换实例
Jun 07 #Javascript
深入理解Angular4中的依赖注入
Jun 07 #Javascript
Vue中保存用户登录状态实例代码
Jun 07 #Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 #Javascript
Angular 4 指令快速入门教程
Jun 07 #Javascript
You might like
PHP新手上路(十二)
2006/10/09 PHP
php购物车实现代码
2011/10/10 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2016新年慰问信范文
2015/03/25 职场文书
检讨书格式范文
2015/05/07 职场文书
宣传委员竞选稿
2015/11/19 职场文书
MySQL 数据类型详情
2021/11/11 MySQL