小程序模板網(wǎng)

小程序之一次性上傳多個本地相片

發(fā)布時間:2017-11-07 09:57 所屬欄目:小程序開發(fā)教程

說在前面

最近由于項目需要所以學(xué)了下小程序,也做了一些東西,隨后便有了以下的一些總結(jié)了,現(xiàn)在說說如何使用小程序一次性上傳多個本地相片。


問題描述

最近做項目的時候要實現(xiàn)一個上傳相片的功能,用了微信提供的api之后發(fā)覺很容易就做出來了,在pc端調(diào)試也沒有弊端,但是等到我用真機調(diào)試的時候就發(fā)現(xiàn)出問題了,問題就是在真機調(diào)試的時候無法一次性上傳多張圖片。


老規(guī)矩,以源碼為導(dǎo)向


photos.js

//部分參數(shù)我就不抽出了,關(guān)鍵是看實現(xiàn)機制
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,

        // 圖片布局列表(二維數(shù)組,由`albumList`計算而得)
        layoutList: [],

        // 布局列數(shù)
        layoutColumnSize: 3,

        // 是否顯示loading
        showLoading: false,

        // loading提示語
        loadingMessage: '',

        // 是否顯示toast
        showToast: false,

        // 提示消息
        toastMessage: '',

        // 是否顯示動作命令
        showActionsSheet: false,

        // 當前操作的圖片
        imageInAction: '',

        // 圖片預(yù)覽模式
        previewMode: false,

        // 當前預(yù)覽索引
     previewIndex: 0,
     images_upload: '../resources/images/camera.png',
     imageBaseUrl : baseUrl+"pictures/"
  },
  /* 函數(shù)描述:作為上傳文件時遞歸上傳的函數(shù)體體;
   * 參數(shù)描述: 
   * filePaths是文件路徑數(shù)組
   * successUp是成功上傳的個數(shù)
   * failUp是上傳失敗的個數(shù)
   * i是文件路徑數(shù)組的指標
   * length是文件路徑數(shù)組的長度
   */      
    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
                        {  //遞歸調(diào)用uploadDIY函數(shù)
                            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; //成功個數(shù)
                var failUp = 0; //失敗個數(shù)
                var length = res.tempFilePaths.length; //總共個數(shù)
                var i = 0; //第幾個
               this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
            },        
    });
  }
})

那么如何使用呢?

修改了uploadUrl之后,直接調(diào)用 uploadImage 函數(shù)即可。


我使用用遞歸的方式來多次上傳選中的圖片的原因?

小程序的官方文檔有提到, wx.uploadFile一次只能上傳一張圖片,而我用了for循環(huán)多次上傳的在pc端調(diào)試可以上傳多張成功,但是在真機調(diào)試的時候卻還是只能上傳一張,于是我便投機在上傳成功之后再次調(diào)取wx.uploadFile進行上傳,結(jié)果成功了,為了代碼整潔我便用了遞歸的方式進行調(diào)用。


Note:發(fā)布的這些文章全都是自己邊學(xué)邊總結(jié)的,難免有紕漏,如果發(fā)現(xiàn)有不足的地方,希望可以指出來,一起學(xué)習(xí)咯,么么噠。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17645.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢