小程序开发 图片上传,多文件上传。

小程序开发 图片上传,多文件上传。参考http://www.wxapp-union.com/portal.php?mod=view&aid=1213

实际使用过程中,相对应的做了一些调整,用来提高用户体验度,递归外层增加状态判断,非正常用户 则不再递归减少请求



/部分参数我就不抽出了,关键是看实现机制
var app = getApp();
var baseUrl = app.baseUrl;
//上传图片的路径
var uploadUrl = baseUrl+'pictureController/insertPic';
var array = [];
var owerId = '33aef7e0ac1b11e6af9f142d27fd7e9e';
var albumId;
var pageSize = 9;
var currentPage = 1;
var cryUrl = app.cryUrl;
Page({
  data: {
        hasMore:false,

        cryUrl:cryUrl,

        clientHeight:0,

        // 图片布局列表(二维数组,由`albumList`计算而得)
        layoutList: [],

        // 布局列数
        layoutColumnSize: 3,

        // 是否显示loading
        showLoading: false,

        // loading提示语
        loadingMessage: '',

        // 是否显示toast
        showToast: false,

        // 提示消息
        toastMessage: '',

        // 是否显示动作命令
        showActionsSheet: false,

        // 当前操作的图片
        imageInAction: '',

        // 图片预览模式
        previewMode: false,

        // 当前预览索引
     previewIndex: 0,
     images_upload: '../resources/images/camera.png',
     imageBaseUrl : baseUrl+"pictures/"
  },
  /* 函数描述:作为上传文件时递归上传的函数体体;
   * 参数描述: 
   * filePaths是文件路径数组
   * successUp是成功上传的个数
   * failUp是上传失败的个数
   * i是文件路径数组的指标
   * length是文件路径数组的长度
   */      
    uploadDIY(filePaths,successUp,failUp,i,length){
      wx.uploadFile({
                    url: uploadUrl, 
                    filePath: filePaths[i],
                    name: 'fileData',
                    formData:{
                      'pictureUid': owerId,
                      'pictureAid': albumId
                    },
                    success: (resp) => {
                        successUp++;
                    },
                    fail: (res) => {
                        failUp ++;
                    },
                    complete: () => {
                        i ++;                        
                        if(i == length)
                        {                      
                          this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败!');
                        }
                        else
                        {  //递归调用uploadDIY函数
                            this.uploadDIY(filePaths,successUp,failUp,i,length);
                        }
                    },
                });
  },
  uploadImage:function(e){
    wx.chooseImage({
        count: 9,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: (res) => {

                var successUp = 0; //成功个数
                var failUp = 0; //失败个数
                var length = res.tempFilePaths.length; //总共个数
                var i = 0; //第几个
               this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
            },        
    });
  }
})

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值