我為了解決啥
小程序官方提供的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