【JavaScript】wx.uploadFile多个文件上传

发表于

今天写微信小程序时，用到 wx.uploadFile，用来上传图片资源信息
因为需要多个文件全部上传，都是uploadFile不支持多个连接同时进行
所以必须重新进行处理，使之可以自动处理多个文件

为了方便使用，可以先在javascript中对wx.uploadFile重新进行封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 上传文件
Tools.upload = function (ops) {
    var fn = {
        success: _empty,
        fail: _empty,
        complete: _empty
    }
    if (ops.success)
        fn.success = ops.success
    if (ops.fail)
        fn.fail = ops.fail
    if (ops.complete)
        fn.complete = ops.complete
    wx.uploadFile({
        url: ops.url,
        filePath: ops.filePath,
        name: (ops.name == null || ops.name == "" || typeof (ops.name) == "undefined") ? 'file' : ops.name,
        header: {
            'Authorization': 'BasicAuth ' + wx.getStorageSync('token')
        },
        formData: (ops.formData == null || typeof (ops.formData) == "undefined") ? {} : ops.formData,
        success: function (res) {
            if (res.statusCode == 200) {
                var _data = Tools.parseJSON(res.data)
                if (_data.errcode == 0) {
                    fn.success(_data.data)
                } else {
                    fn.fail(_data.message)
                }
            } else {
                Tools.alert(res.data, 'error')
                fn.fail(res.data.Message)
            }
        },
        fail: function (res) {
            fn.fail(res)
        },
        complete: function (res) {
            fn.complete(res)
        }
    })
}

接着通过递归的方式在一个连接完成后，重新调用，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
uploadFile(files) {
    if (!files || files.length <= 0) return
    var that = this,
        file = files[0]
    files.splice(0, 1)
    $.upload({
        url: that.config.uploadFileUrl, // api地址
        filePath: file.filePath, // 资源地址
        name: 'uploadfile',
        formData: {
            source: file.source, // 来源信息
            sourceId: file.sourceId // 来源ID
        }, // 提交额外 formdata
        success: function (res) {
            // 提交成功...
        },
        complete: function (res) {
            that.uploadFile(files)
        }
    })
}

服务端，接收代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[HttpPost]
[AllowAnonymous]
public AjaxResult UploadFile()
{
    // 接收资源文件
    HttpFileCollection hfc = HttpContext.Current.Request.Files;
    // 接收formdata
    string Source = HttpContext.Current.Request["source"];
    string SourceId = HttpContext.Current.Request["sourceId"];
    // 处理...
}