微信小程序一次性上传多张图片

Question

微信提供的wx.uploadFiles() ，每次只能上传一份文件，如果需要一次性上传多个图片，用递归是可以做出来的。但是我现在的需求是用户发动态，用户一次性可以发好几张图片，这样的话，就会造成有几张图片就会请求了几次，这时候我如何去确定当前的请求呢？我在数据库里，这几张图片都应该是是属于同一条记录的，这怎么做到呢？

Answer 1

我的做法是使用promise来处理多个上传请求，然后每个上传请求完成后返回地址。
全部上传完成后在请求一次，保存这几条地址到数据库。

promisify.js:

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

我封装的上传函数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)
            }

            // data.code == 1000需要去掉，这里是根据自己的返回数据做相应判断
            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('上传进度', res.progress)
        console.log('已经上传的数据长度', res.totalBytesSent)
        console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        if (progress) (
            progress(res)
        )
    })
}

module.exports = {
    upload: upload
}

上传:

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

//转为promise对象
const upload = promisify(network.upload)


//上传函数
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()

        // 服务器返回的路径
        let paths = datas.map(data => {
            return data.data
        })

        // 保存，这里可以选择发送一个请求，保存这几条路径
        images = images.concat(paths)
        z.setData({
            images: images
        })
    }).catch(function (res) {
        wx.hideLoading()
        util.handleFail(res)
    })
}

Answer 2

paths.map is not a function;