解决union App 开发微信小程序, 一次http请求可上传多张图片、无依赖

1.uni.uploadFile的api在微信小程序中一次只能上传一个图片,如下说明文档

2.微信小程序 wx.uploadFile 官方示例代码也只能一次请求上传一张图片：

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

3.使用xp-multipart 解决了单图片限制

在项目中验证可用

3.1、概述

uniapp官方提供的uni.uploadFile或 微信官方wx.uploadFile 一次只能上传一个图片，xp-multipart既可以用来发送普通的表单数据，也可以同时上传多个图片文件

为微信小程序封装的，其余平台暂未考虑；app和h5直接使用uni.uploadFile即可

底层依然使用wx.request 进行封装，因此小程序管理后台设置了request的合法域名可以正常使用

3.2、在项目中使用

url 接口地址
fields 表单数据
files 文件图片
header 请求头（函数中content-type为multipart/form-data，不可也无需再设置
success (必传参数)
fail
complete

import {
    multipartUpload as upload,
    uploadTask as task //上传任务对象，同requestTask
} from "@/utils/xp-multipart.js"

//1、回调函数
uni.chooseImage({
    count: 2,//选择两张图片
    success(res) {
        upload({
            url: "http://localhost:6891/upload", //后端接口
            fields: {
                username: "张三",
                age: 24
            },
            files: {
                avatar: res.tempFilePaths[0],
                img: res.tempFilePaths[1]
            },
            success(res) {
                console.log(res)
            },
            fail(err) {
                console.log(err)
            },
            complete(ret) {
                console.log(ret)
            }
        })
    }
})


task.abort();//取消上传

3.3 附上后端接口示例（这里用的是spring-boot）

@PostMapping("/upload")
public String upload(@RequestParam("username") String name,
                     @RequestParam("age") Integer age,
                     MultipartFile avatar,
                     MultipartFile img) {
    System.out.println(name);
    System.out.println(age);
    System.out.println(avatar.getOriginalFilename());
    System.out.println(img.getOriginalFilename());
    return "success";
}

参考:微信小程序！ 一次http请求可上传多张图片、无依赖