码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-06-06 21:52:24      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:backend   asc   npm   ISE   返回   type   tps   支持   object   

我为了解决啥

小程序官方提供的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

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

标签:backend   asc   npm   ISE   返回   type   tps   支持   object   

原文地址:https://www.cnblogs.com/rainbowLover/p/13056246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!