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

系统管理员 2021-07-16 14:36 568阅读 0赞

小程序开发 图片上传，多文件上传。参考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);
                },        
        });
      }
    })