在使用uView时，我用到了upload组件

<template>
    <u-upload
	:fileList="fileList1"
	@afterRead="afterRead"
	@delete="deletePic"
	name="1"
	multiple
	:maxCount="10"
    ></u-upload>
</template>

<script>
export default {
	data() {
		return {
			fileList1: [],
		}
	},
	methods:{
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
	}
}
</script>

这是组件官方的基础用法，但他只能一次上传一个文件，且选择完毕既上传，而我要的效果是点击上传批量文件，于是进行了一些小改动 关键代码是

uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test'
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data.data)
				}, 1000)
			}
		});
	})
},

点击提交上传的实现

将文件添加至列表后，会调用uploadFilePromise函数进行上传，我们将其架空，再使用bottom绑定一个函数，将其核心移至新绑定的函数中

    <button @click="LetUpLoad" type="default">上传</button>
    
    script
      uploadFilePromise(url) {
        console.log("文件准备完毕")
        // console.log(url)
        ☆☆☆☆☆this.uploadUrl += `"` + url + `"` ☆☆☆☆☆
        console.log(this.uploadUrl)
      },
      LetUpLoad() {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: '填入你的目标接口',
           ☆☆☆☆☆ filePath: this.uploadUrl, ☆☆☆☆☆
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              console.log(res)
              this.fileList1 = []
              this.uploadUrl = ""
            }
          });
        })
      }

同时，这样的操作会导致原filePat：url 失踪，所以我们在data中声明uploadUrl=""，进行绑定，这样既实现了点击按钮上传的功能。

同时提交多个文件的思路

我们将url打印可得：，那么根据逻辑，同时提交多个文件即同时提交多个blob，我尝试了各种拼接方法，最后发现即可成功同时上传。

全部代码

<template>
  //上传组件
  <view class="">
    <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
      :previewFullImage="true" :maxCount="10">
    </u-upload>
    <button @click="LetUpLoad" type="default">上传</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fileList1: [], //文件列表
        uploadUrl: "", //文件url
      }
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      //文件中转
      uploadFilePromise(url) {
        console.log("文件准备完毕")
        // console.log(url)
        this.uploadUrl += `"` + url + `"`
        console.log(this.uploadUrl)
      },
      //上传图片
      LetUpLoad() {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: '填入你的目标接口',
            filePath: this.uploadUrl,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              console.log(res)
              this.fileList1 = []
              this.uploadUrl = ""
            }
          });
        })
      }
    }
  }
</script>

<style>
    自己美化UI
</style>