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


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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue中的适配px2rem示例代码
Nov 19 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
各种战术和打法的原创者
2020/03/04 星际争霸
6种php上传图片重命名的方法实例
2013/11/04 PHP
php检测url是否存在的方法
2015/04/14 PHP
php常用正则函数实例小结
2016/12/29 PHP
PDO实现学生管理系统
2020/03/21 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python操作日期和时间的方法
2014/03/11 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python 类详解及简单实例
2017/03/24 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
中医专业应届生求职信
2013/11/17 职场文书
学术会议邀请函范文
2014/01/22 职场文书
教师党性分析材料
2014/02/04 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
食品安全责任书
2014/04/15 职场文书
初中学校军训方案
2014/05/09 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技