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


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 相关文章推荐
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
基于layui数据表格以及传数据的方式
Aug 19 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
Apache中php.ini的设置方法
2013/02/28 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
PHP PDO操作总结
2014/11/17 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
公司端午节活动方案
2014/02/04 职场文书
行政人事岗位职责
2014/03/17 职场文书
家长会标语
2014/06/24 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
信访维稳承诺书
2015/05/04 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
用JS写一个发布订阅模式
2021/11/07 Javascript
优化Mysql查询的示例
2022/04/26 MySQL