【报Bug】同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11专业版21h2

HBuilderX类型：正式

HBuilderX版本号： 3.96

手机系统： Android

手机系统版本号： Android 13

手机厂商：小米

手机机型： k40

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view>  
        <u--form labelPosition="left">  
            <u-button text="请选择图片" type="primary" @click="choicePic"></u-button>  
            <image :src='item' v-for="(item,index) in picTempPaths" :key="index"  
                style="width: 120rpx;height: 120rpx;padding: 5rpx;">  
            </image>  
        </u--form>  
        <u-button style="margin-top: 50rpx;" text="提交" type="primary" @click="submit"></u-button>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                picTempPaths: [],  
            }  
        },  
        methods: {  
            async submit() {  
                let pics = this.picTempPaths.map((value, index) => {  
                    return {  
                        name: 'files',  
                        uri: value  
                    }  
                })  
                console.log("Pics.length:", pics.length);  
                this.uploadTask = uni.uploadFile({  
                    url: '/todo/upLoadPic',  
                    files: pics,  
                    success: (res) => {  
                        let data = JSON.parse(res.data)  
                        console.log("后台收到数量:", data.length);  
                        console.log('图片后台地址: ', data);  
                    },  
                });  
            },  

            choicePic() {  
                uni.chooseImage({  
                    count: 5,  
                    sizeType: ['original', 'compressed'],  
                    sourceType: ['album', 'camera'],  
                    success: (res) => { //要使用箭头函数,否则访问不到this  
                        res.tempFilePaths.forEach(item => {  
                            this.picTempPaths.push(item)  
                        })  
                    },  
                })  

            },  
        },  
    }  
</script>

操作步骤：

同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片,查看后端接收的数据,H5发送时正常接收多张图片,app端发送时只能收到一张图片(多个图片最后的一个),用手机和夜神模拟器都一样结果

预期结果：

可以正常上传多张图片

实际结果：

在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

bug描述：

同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片,查看后端接收的数据,H5发送时正常接收多张图片,app端发送时只能收到一张图片(多个图片最后的一个),用手机和夜神模拟器都一样结果

2023-11-10 23:36 负责人:无分享

1 个回复

tongyi (作者)

已解决，前端和后端面代码都有问题1、还是因为对文档理解的不透彻 2、关键技术掌握不好
原来的前端 name 相同, 后端webapi接收参数不对:

 public async Task<ActionResult> UpLoadPic(IFormFile[] files)  
{  
       //h5端可以成功接收多个图片,app端只能接收到最后一个  
}

前端代码改一下:

let pics = this.picTempPaths.map((value, index) => {    
               return {    
                        name: 'files',    //改为  name:'files'+index  
                        uri: value    
                }    
                })

后端代码改一下:

 [HttpPost]  
 public async Task<ActionResult> UpLoadPic(IFormCollection formCollection)  
 {  
     FormFileCollection formFiles = (FormFileCollection)formCollection.Files;  
     List<string> paths = new();  
     try  
     {  
         for (int i = 0; i < formFiles.Count; i++)  
         {  
             var file = formFiles[i];  
             if (file.Length < 0) break;  
             string downloadUrl = configuration.GetValue<string>("DownloadUrl");//路径  
             string tennatId = this.User.FindFirstValue("TenantId");  
             string staticDir = "wwwroot/";  
             string filePath = $"UpLoadImages/{tennatId}/{DateTime.Now:yyyyMM}/";  
             string fileExtension = Path.GetExtension(file.FileName);// 获取文件扩展名  
             var fileName = file.FileName.Replace(fileExtension, "");//获取原文件名  
             string newFileName = $"{fileName}{DateTime.Now:HHmmssffff}{fileExtension}"; //原文件名+时间防止文件名冲突+扩展名  
             if (!Directory.Exists(staticDir + filePath))  
                 Directory.CreateDirectory(staticDir + filePath);  

             using (FileStream stream = System.IO.File.Create(staticDir + filePath + newFileName))  
             {  
                 await file.OpenReadStream().CopyToAsync(stream);  
             }  
             string path = downloadUrl + filePath + newFileName;  
             paths.Add(path);  
         }  
         return Ok(paths);  
     }  
     catch (System.Exception ex)  
     {  
         return BadRequest(ex.Message);  
     }  
 }

要回复问题请先登录或注册

【报Bug】同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

操作步骤：

同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片,查看后端接收的数据,H5发送时正常接收多张图片,app端发送时只能收到一张图片(多个图片最后的一个),用手机和夜神模拟器都一样结果

预期结果：

可以正常上传多张图片

实际结果：

在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

bug描述：

1 个回复

公告

相关问题

【报Bug】同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

操作步骤： 同样的代码uni.uploadFile在H5上可以成功上传多张图片,在APP下只能上传最后一张图片,查看后端接收的数据,H5发送时正常接收多张图片,app端发送时只能收到一张图片(多个图片最后的一个),用手机和夜神模拟器都一样结果

预期结果： 可以正常上传多张图片

实际结果： 在H5上可以成功上传多张图片,在APP下只能上传最后一张图片

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

可以正常上传多张图片

实际结果：

在H5上可以成功上传多张图片,在APP下只能上传最后一张图片