微信小程式之多檔案下載下傳的簡單封裝

需求

需要生成一個宣傳的圖檔分享到朋友圈，這個宣傳圖檔包含二維碼，包含不同的背景圖檔和不同的文字。對于這種圖檔生成，我們考慮過使用服務端生成，但是這樣會比較耗伺服器性能，是以最終決定使用本地生成。

首先小程式有一個限制，包不能大于2m，而且我們可能多個背景圖，是以計劃把背景圖和二維碼圖檔放在服務端，這樣可以減少小程式包的大小，也可以靈活的切換背景圖。

在繪制分享圖的時候，可以直接使用網際網路位址，但是遇到了一個問題，有可能不能生成圖檔，是以我們需要把這個圖檔檔案下載下傳下來。

下載下傳檔案的方法微信有API，但是傳回的是檔案的臨時路徑，隻在小程式本次啟動期間可以正常使用，如需持久儲存，需在主動調用 wx.saveFile，才能在小程式下次啟動時通路得到。

是以我們先把下載下傳檔案和儲存檔案封裝

封裝下載下傳并且儲存一個檔案

這個方法比較簡單

參數：一個對象，包含

id 需要下載下傳檔案的id，如果不傳預設是下載下傳的url，之是以需要id，是因為我們要做多檔案下載下傳，可以區分下載下傳的是一個檔案
url 下載下傳檔案的網絡位址（需要微信小程式背景配置，具體配置方法請參考微信官方文檔）
success 成功回調傳回參數是一個對象包含 id , savedFilePath
fail 失敗回調 ,下載下傳失敗，儲存都是都算失敗

/**
 * 下載下傳儲存一個檔案
 */
function downloadSaveFile(obj) {
    let that = this;
    let success = obj.success;
    let fail = obj.fail;
    let id = "";
    let url = obj.url;
    if (obj.id){
        id = obj.id;
    }else{
        id = url;
    }

    // console.info("%s 開始下載下傳。。。", obj.url);
    wx.downloadFile({
        url: obj.url,
        success: function (res) {
            wx.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (result) {
                    result.id = id;
                    if (success) {
                        success(result);
                    }
                },
                fail: function (e) {
                    console.info("儲存一個檔案失敗");
                    if (fail) {
                        fail(e);
                    }
                }
            })

        },
        fail: function (e) {
            console.info("下載下傳一個檔案失敗");
            if (fail) {
                fail(e);
            }

        }
    })
}

使用下載下傳方法（wx.downloadFile(obj)）需要在微信小程式配置伺服器域名,伺服器域名請在 小程式背景-設定-開發設定-伺服器域名 中進行配置，具體請參考微信官方文檔

封裝多檔案下載下傳并且儲存

多檔案下載下傳并且儲存，強制規定，必須所有檔案下載下傳成功才算傳回成功

urls 下載下傳位址數組，支援多個 url下載下傳 [url1,url2]
success 下載下傳成功（必須所有檔案下載下傳成功才算傳回成功）回調參數 map ，key(id) -> value ({id,savedFilePath})
fail 下載下傳失敗，隻要有一個方法失敗就調用失敗

/**
 * 多檔案下載下傳并且儲存，強制規定，必須所有檔案下載下傳成功才算傳回成功
 */
function downloadSaveFiles(obj) {
    // console.info("準備下載下傳。。。");
    let that = this;
    let success = obj.success; //下載下傳成功
    let fail = obj.fail; //下載下傳失敗
    let urls = obj.urls;  //下載下傳位址 數組，支援多個 url下載下傳 [url1,url2]
    let savedFilePaths = new Map();
    let urlsLength = urls.length;  // 有幾個url需要下載下傳

    for (let i = 0; i < urlsLength; i++) {
        downloadSaveFile({
            url: urls[i],
            success: function (res) {
                //console.dir(res);
                //一個檔案下載下傳儲存成功
                let savedFilePath = res.savedFilePath;
                                
                savedFilePaths.set(res.id, res);
                console.info("savedFilePath:%s", savedFilePath);
                if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
                    if (success){
                        success(savedFilePaths)
                    }
                    
                }
            },
            fail: function (e) {
                console.info("下載下傳失敗");
                if (fail) {
                    fail(e);
                }

            }
        })

    }

}

完整的 `download.js` 檔案

/**
 * 下載下傳管理器
 * Created by 全科 on 2018/1/27.
 */

/**
 * 下載下傳儲存一個檔案
 */
function downloadSaveFile(obj) {
    let that = this;
    let success = obj.success;
    let fail = obj.fail;
    let id = "";
    let url = obj.url;
    if (obj.id){
        id = obj.id;
    }else{
        id = url;
    }

    // console.info("%s 開始下載下傳。。。", obj.url);
    wx.downloadFile({
        url: obj.url,
        success: function (res) {
            wx.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (result) {
                    result.id = id;
                    if (success) {
                        success(result);
                    }
                },
                fail: function (e) {
                    console.info("儲存一個檔案失敗");
                    if (fail) {
                        fail(e);
                    }
                }
            })

        },
        fail: function (e) {
            console.info("下載下傳一個檔案失敗");
            if (fail) {
                fail(e);
            }

        }
    })
}
/**
 * 多檔案下載下傳并且儲存，強制規定，必須所有檔案下載下傳成功才算傳回成功
 */
function downloadSaveFiles(obj) {
    // console.info("準備下載下傳。。。");
    let that = this;
    let success = obj.success; //下載下傳成功
    let fail = obj.fail; //下載下傳失敗
    let urls = obj.urls;  //下載下傳位址 數組，支援多個 url下載下傳 [url1,url2]
    let savedFilePaths = new Map();
    let urlsLength = urls.length;  // 有幾個url需要下載下傳

    for (let i = 0; i < urlsLength; i++) {
        downloadSaveFile({
            url: urls[i],
            success: function (res) {
                console.dir(res);
                //一個檔案下載下傳儲存成功
                let savedFilePath = res.savedFilePath;
                                
                savedFilePaths.set(res.id, res);
                console.info("savedFilePath:%s", savedFilePath);
                if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
                    if (success){
                        success(savedFilePaths)
                    }
                    
                }
            },
            fail: function (e) {
                console.info("下載下傳失敗");
                if (fail) {
                    fail(e);
                }

            }
        })

    }


}
module.exports = {
    downloadSaveFiles: downloadSaveFiles
}

使用

首先導入

import download from "download.js"

之後調用

let url1 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
 let url2 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';

download.downloadSaveFiles({
    urls: [url1, url2],
    success: function (res) {
        // console.dir(res);
     
        console.info(res.get(url2).savedFilePath)
    },
    fail: function (e) {
        console.info("下載下傳失敗");
    }
);

參考

https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxdownloadfileobject

原文釋出時間為：2018年01月29日

原文作者：

quanke_

本文來源：

開源中國

如需轉載請聯系原作者

微信小程式之多檔案下載下傳的簡單封裝

需求

封裝下載下傳并且儲存一個檔案

封裝多檔案下載下傳并且儲存

完整的 `download.js` 檔案

使用

參考

繼續閱讀

RDLC報表在WinForm裡運作出現未能加載檔案或程式集 Microsoft.ReportViewer.WinForms, Version=11.0.0.0 System.IO.FileNotFoundException

PS等難解除安裝軟體的通用強制解除安裝方法、安裝程式檢測到計算機重新啟動...問題、安裝失敗問題

阿裡雲原生開源大家族加入中科院軟體所開源軟體供應鍊點亮計 - 暑期 2021項目介紹項目申請攻略獎金說明參與流程

微信小程式之多檔案下載下傳的簡單封裝

需求

封裝下載下傳并且儲存一個檔案

封裝多檔案下載下傳并且儲存

完整的 download.js 檔案

使用

參考

繼續閱讀

完整的 `download.js` 檔案