实现微信小程序多文件同时上传，并且携带参数
我为了解决啥
小程序官方提供的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
