实现微信小程序多文件同时上传，并且携带参数

发布时间：2022-09-08 10:16:23作者：顺晟科技点击：

我为了解决啥

小程序官方提供的api wx.uploadFile一次只能上传一个文件，本Multipart实现了一般的表单上传，无文件数量限制，还能携带json上传你说气人不气人

咋用

目录结构

./index.js 在这个入口文件内可以修改版本（切换下文所说的用法一和用法二）

切换你想要的用法，然后打包$ npm run build 运行后在 ./dist文件夹下找到你所需要的库文件

./examples/backend/index.js

这个是模拟后台，$ npm run start 就可启动后台服务

./examples/wx_demo/

这个是微信小程序代码，用微信小程序ide导入后就能运行看效果了

用法一：你把文件和要传的信息给我（包括文件、json数据（只能一层的简单json哈）、请求头），我给她们都送到后端去

引入库文件

创建 Multipart 对象该对象构造函数接收参数有：

- fields提交的参数（数组） - files提交的文件信息（数组） - header头信息（json对象） - url请求路径（字符串） ```js

            let multi = new Multipart({
            fields:[{
              name:\'token\',
              value:\'gdsgfhdgjukfdk\'
             },{
              name:\'username\',
              value:\'rainbowLover\'
             }],
             files:[{
              filePath:\'http://example.png\',//文件路径 必须要有的
              filename:\'img1\',//文件名称 后台要不要？
              name: \'name\',//字段名
              file: {object} 
             }],
              header:{
                \'Cookie\': \'cookievalue\',
                \'headerName\': \'headerValue\'
              }
            })

```

还支持动态添加文件

```js

      multi.files({
        filePath:\'http://example.png\',//文件路径 必须要有的
        filename:\'img1\',//文件名称 后台要不要？
        name: \'name\',//字段名
        file: {object} 
      })

```

调用对象的提交方法该方法的参数有：

- url 请求路径 - options 配置信息比如header - 该方法返回一个Promise对象 ```js

         multi.submit(url, { header })
          .then(
            (res) => {
              console.log(res)
            },
            (err) => {
              console.log(err)
            }
          )

```

用法二: 你告诉我开始整（json、header），我就调用微信api获取文件然后直接给你把东西送到后端去，就是在方法一的基础上二次封装

引入库文件

直接调用filesJsonPost方法，该方法的参数有：

- options ```js

          /**
          * 多文件上传
          * url: 上传路径 必传
          * data: 上传json参数 默认 {}
          * jsonKey: 后台接收参数的key 默认 \'jsonReport\'
          * count: 文件最多上传几张 默认 9
          * type: 选取文件类型 默认 all
          * extension: 选取文件类型 字符串数组 根据文件拓展名过滤，仅 type==file 时有效。每一项都不能是空字符串。默认不过滤。默认 空
          * header: 自定义请求头
          */
          let options = {
            url: \'http://localhost:3000/upload\',
            data: {
              name: "jeck",
              age: 123
            },
            jsonKey: "jsonReport",
            count: 9,
            type: "all",
            extension: [null],
            header: {
              "headerName": "headerValue"
            }
          }

```

1. 运行

```js

npm i
npm run build //打包生成库文件
npm run start //运行后端服务

```

2. 测试小程序

用微信开发者工具打开wx_demo,提交表单后，上传的文件保存在./examples/tempFiles

最重要的写在后边

本demo借鉴supperchong的，如果您不高兴了请联系我删除

完整代码：https://gitee.com/haipengguo/Multipart 如果对你有帮助请star

上一篇 : 微信小程序HTTPS证书部署案例
下一篇 : 微信小程序无法抓包的解决办法及原因分析

知识分享