# Multipart

**Repository Path**: haipengguo/Multipart

## Basic Information

- **Project Name**: Multipart
- **Description**: 实现微信小程序多文件同时上传，并且携带参数
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 2
- **Created**: 2020-06-06
- **Last Updated**: 2024-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 我为了解决啥
小程序官方提供的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的，如果您不高兴了请联系我删除