uniapp多图片文件批量上传

APP可以多图上传，但微信小程序不支持多文件上传，解决办法是循环上传
uniapp文档有介绍
https://uniapp.dcloud.io/api/request/network-file?id=uploadfile

image.png

<view class="cu-form-group">
            <view class="grid col-4 grid-square flex-sub">
                <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                 <image :src="imgList[index]" mode="aspectFill"></image>
                    <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                        <text class='cuIcon-close'></text>
                    </view>
                </view>
                <view class="solids" @tap="ChooseImage" v-if="imgList.length<20">
                    <text class='cuIcon-cameraadd'></text>
                </view>
            </view>
        </view>
        <view class="btn">
            <view class="padding flex flex-direction">
                <button class="cu-btn bg-red margin-tb-sm lg" @click="submit">确认</button>
            </view>
        </view>

methods:{
            async submit(){  
                this.form.imgs=await this.uploads() 
                this.$api.http.post('/add_record',this.form).then(res=>{    
                })
            },
            //小程序不支持多文件上传 
            async uploads(){ 
                const that=this     
                let arr=[]
                for (let k in that.imgList) {
                    arr[k]=await that.up_img(that.imgList[k])
                } 
                return arr;
            },
            up_img(url){ 
                return new Promise((resolve, reject) => {  
                    uni.uploadFile({
                        url: 'https://xxx.com/up_img', //仅为示例，非真实的接口地址
                        filePath: url,
                        name: 'img',
                        header: {
                            token:uni.getStorageSync("token")
                        },
                        formData: {
                            'user': 'test'
                        },
                        success: (uploadFileRes) => { 
                            resolve(uploadFileRes.data);  
                        }
                    });
                })  
            },
            ChooseImage() {
                uni.chooseImage({
                    count: 20, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        if (this.imgList.length != 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
                        } else {
                            this.imgList = res.tempFilePaths
                        } 
                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg(e) {
                uni.showModal({
                    title: '删除',
                    content: '确定要删除吗？',
                    cancelText: '否',
                    confirmText: '是',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            }
        }
    

PHP获取文件

public function up_img(){
        $file = request()->file('img');
        $info = $file->move( './uploads');
        if($info){
            return $info->getSaveName();
        }else{
            throw new BaseException(['msg'=>'上传失败']);
        }
    }