在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Java  HTML/ 微信小程序一次性上傳多張圖片

微信小程序一次性上傳多張圖片

微信提供的wx.uploadFiles() ,每次只能上傳一份文件,如果需要一次性上傳多個(gè)圖片,用遞歸是可以做出來的。但是我現(xiàn)在的需求是用戶發(fā)動(dòng)態(tài),用戶一次性可以發(fā)好幾張圖片,這樣的話,就會(huì)造成有幾張圖片就會(huì)請(qǐng)求了幾次,這時(shí)候我如何去確定當(dāng)前的請(qǐng)求呢?我在數(shù)據(jù)庫里,這幾張圖片都應(yīng)該是是屬于同一條記錄的,這怎么做到呢?

回答
編輯回答
避風(fēng)港

我的做法是使用promise來處理多個(gè)上傳請(qǐng)求,然后每個(gè)上傳請(qǐng)求完成后返回地址。
全部上傳完成后在請(qǐng)求一次,保存這幾條地址到數(shù)據(jù)庫。

promisify.js:

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}

我封裝的上傳函數(shù)upload,放在network.js中:

function upload(options) {
    var url = options.url,
        path = options.path,
        name = options.name,
        // data = options.data,
        extra = options.extra,
        success = options.success,
        progress = options.progress,
        fail = options.fail

    console.log("upload url:" + url)
    const uploadTask = wx.uploadFile({
        url: url,
        filePath: path,
        name: name,
        formData: extra,
        success: function (res) {
            console.log(res);

            var data = res.data
            try {
                data = JSON.parse(res.data)
                console.log(data)
            }
            catch (e) {
                console.log(data)
                throw(e)
            }

            if (res.statusCode == 200 && data.code == 1000) {
                if (success) {
                    success(data)
                }
            }
            else {
                if (fail) {
                    fail(data)
                }
            }

        },
        fail: function (res) {
            console.log(res)
            if (fail) {
                fail(res)
            }
        }
    })

    uploadTask.onProgressUpdate((res) => {
        console.log('上傳進(jìn)度', res.progress)
        console.log('已經(jīng)上傳的數(shù)據(jù)長度', res.totalBytesSent)
        console.log('預(yù)期需要上傳的數(shù)據(jù)總長度', res.totalBytesExpectedToSend)
        if (progress) (
            progress(res)
        )
    })
}

module.exports = {
    upload: upload
}

上傳:

const network = require("../../utils/network.js")
const promisify = require("../../utils/promisify.js")

//轉(zhuǎn)為promise對(duì)象
const upload = promisify(network.upload)


//上傳函數(shù)
uploadMultiImage: function (paths) {
    let z = this
    
    let url = '...'

    const promises = paths.map(function (path) {
        return upload({
            url: url,
            path: path,
            name: 'file',
            extra: {},
        })
    })

    wx.showLoading({
        title: '正在上傳...',
    })
    
    Promise.all(promises).then(function (datas) {
        //所有上傳完成后
        
        wx.hideLoading()

        // 服務(wù)器返回的路徑
        let paths = datas.map(data => {
            return data.data
        })

        // 保存,這里可以選擇發(fā)送一個(gè)請(qǐng)求,保存這幾條路徑
        images = images.concat(paths)
        z.setData({
            images: images
        })
    }).catch(function (res) {
        wx.hideLoading()
        util.handleFail(res)
    })
}
2017年11月7日 22:48