找回密码
 立即注册

QQ登录

只需一步,快速开�

[Demo源码] 微信小程序上传多张图片以及视频demo下载

  [复制链接]
查看: 3713|回复: 115
最佳答案
0 

9

主题

9

帖子

210

积分

新人求带

积分
210
 楼主| 发表于 2018-7-2 14:58:39 | 显示全部楼层 |阅读模式
微信小程序上传多张图片以及视频demo下载

2145635.png
145658.png

在需要上传页面的js中
  1. upFiles.js ------ ./utils/upFiles.js

  2. var upFiles = require('../../utils/upFiles.js')
  3. Page({

  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.       upFilesBtn:true,
  9.       upFilesProgress:false,
  10.       maxUploadLen:6,
  11.       
  12.   },

  13.   /**
  14.    * 用户点击右上角分享
  15.    */
  16.   onShareAppMessage: function () {
  17.   
  18.   },
  19.   // 预览图片
  20.   previewImg: function (e) {
  21.       let imgsrc = e.currentTarget.dataset.presrc;
  22.       let _this = this;
  23.       let arr = _this.data.upImgArr;
  24.       let preArr = [];
  25.       arr.map(function(v,i){
  26.           preArr.push(v.path)
  27.       })
  28.     //   console.log(preArr)
  29.       wx.previewImage({
  30.           current: imgsrc,
  31.           urls: preArr
  32.       })
  33.   },
  34.     // 删除上传图片 或者视频
  35.   delFile:function(e){
  36.      let _this = this;
  37.      wx.showModal({
  38.          title: '提示',
  39.          content: '您确认删除嘛?',
  40.          success: function (res) {
  41.              if (res.confirm) {
  42.                  let delNum = e.currentTarget.dataset.index;
  43.                  let delType = e.currentTarget.dataset.type;
  44.                  let upImgArr = _this.data.upImgArr;
  45.                  let upVideoArr = _this.data.upVideoArr;
  46.                  if (delType == 'image') {
  47.                      upImgArr.splice(delNum, 1)
  48.                      _this.setData({
  49.                          upImgArr: upImgArr,
  50.                      })
  51.                  } else if (delType == 'video') {
  52.                      upVideoArr.splice(delNum, 1)
  53.                      _this.setData({
  54.                          upVideoArr: upVideoArr,
  55.                      })
  56.                  }
  57.                  let upFilesArr = upFiles.getPathArr(_this);
  58.                  if (upFilesArr.length < _this.data.maxUploadLen) {
  59.                      _this.setData({
  60.                          upFilesBtn: true,
  61.                      })
  62.                  }
  63.              } else if (res.cancel) {
  64.                  console.log('用户点击取消')
  65.              }
  66.          }
  67.      })
  68.      
  69.      
  70.   },
  71.   // 选择图片或者视频
  72.   uploadFiles: function (e) {
  73.       var _this = this;
  74.       wx.showActionSheet({
  75.           itemList: ['选择图片', '选择视频'],
  76.           success: function (res) {
  77.             //   console.log(res.tapIndex)
  78.               let xindex = res.tapIndex;
  79.               if (xindex == 0){
  80.                   upFiles.chooseImage(_this, _this.data.maxUploadLen)
  81.               } else if (xindex == 1){
  82.                   upFiles.chooseVideo(_this, _this.data.maxUploadLen)
  83.               }
  84.               
  85.           },
  86.           fail: function (res) {
  87.               console.log(res.errMsg)
  88.           }
  89.       })
  90.   },
  91.   // 上传文件
  92.   subFormData:function(){
  93.       let _this = this;
  94.       let upData = {};
  95.       let upImgArr = _this.data.upImgArr;
  96.       let upVideoArr = _this.data.upVideoArr;
  97.       _this.setData({
  98.           upFilesProgress:true,
  99.       })
  100.       upData['url'] = config.service.upFiles;
  101.       upFiles.upFilesFun(_this, upData,function(res){
  102.           if (res.index < upImgArr.length){
  103.               upImgArr[res.index]['progress'] = res.progress
  104.               _this.setData({
  105.                   upImgArr: upImgArr,
  106.               })
  107.           }else{
  108.               let i = res.index - upImgArr.length;
  109.               upVideoArr[i]['progress'] = res.progress
  110.               _this.setData({
  111.                   upVideoArr: upVideoArr,
  112.               })
  113.           }
  114.         //   console.log(res)
  115.       }, function (arr) {
  116.           // success
  117.           // 上传完成之后图片的路径数组
  118.           console.log(arr)
  119.       })
  120.   }
  121. })
复制代码

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

10

帖子

80

积分

等待验证会员

积分
80
发表于 2018-7-2 21:41:31 | 显示全部楼层
不错不错谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

18

帖子

280

积分

等待验证会员

积分
280
发表于 2018-7-2 22:40:28 | 显示全部楼层

这个有点意思,可以啊
回复 支持 反对

使用道具 举报

最佳答案
0 

4

主题

117

帖子

791

积分

略知一二

积分
791
发表于 2018-7-3 08:02:14 | 显示全部楼层

谢谢分享。
回复

使用道具 举报

最佳答案
0 

0

主题

1361

帖子

7922

积分

S1

积分
7922
QQ
发表于 2018-7-3 09:23:01 | 显示全部楼层
加测啊。。。。
回复

使用道具 举报

最佳答案
0 

0

主题

775

帖子

1万

积分

S2

积分
13468
发表于 2018-7-3 09:39:19 | 显示全部楼层
好东西啊
回复

使用道具 举报

最佳答案
0 

2

主题

732

帖子

4633

积分

专家路上

积分
4633
发表于 2018-7-4 08:35:40 | 显示全部楼层
这个有点意思,可以啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

18

帖子

250

积分

等待验证会员

积分
250
发表于 2018-7-4 08:40:40 | 显示全部楼层
就只要这样就可以了吗
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

76

帖子

281

积分

新人求带

积分
281
发表于 2018-7-4 10:40:12 | 显示全部楼层
谢谢楼主哈哈
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

111

帖子

1017

积分

专家路上

积分
1017
发表于 2018-7-4 14:24:47 | 显示全部楼层
我循环的时候,总是掉图
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com