r***@sohu.com
r***@sohu.com
  • 发布:2019-09-18 22:57
  • 更新:2021-10-15 14:26
  • 阅读:4944

uni 批量上传图片

分类:uni-app

最近做一个项目,后台是php,碰到一个图片批量上传的问题,搜索过相关文章,发现是一个坑。所以发文分享一下经验,希望碰到同样问题的朋友可以少走些弯路。
其中用到了uni.uploadFile和uni.chooseImage两个api,这两个的具体用法和说明,官方有文档,不再赘述。
与后台约定的post传值key为uploads,内容为包含文件对象的数组
uni.chooseImage选择图片或者拍照,没有碰到问题,获取到返回对象为res,然后作为参数传入上传图片的方法
贴代码:

upimgs(res){  
                let that=this;  
                let imgs = res.tempFilePaths.map((value, index) => {  
                    return {  
                        name: "uploads["+index+"]",//注意这一行,uni的hello的示例中,这里为key名+index,这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。  
                        uri: value  
                    }  
                });  
                console.log(JSON.stringify(imgs));  
                uni.uploadFile({  
                    url:"替换为你的接口地址",  
                    files:imgs,  
                    formData:{},  
                    success: function(data){  
                        //成功的回调函数  
                    }  
                });  
            }
2 关注 分享
Citizen_C BruceYu

要回复文章请先登录注册

1***@qq.com

1***@qq.com

多张上传,为什么服务端只接受到前面两张,后面的接收不到?好奇怪啊
2021-10-15 14:26
唐明明

唐明明

我也遇到了差不多的问题,我单图上传后端可以接到数据,多图上传接不到数据
2021-08-23 13:26
choin

choin

确实是这么回事,解决了! 太多坑了
2021-01-02 10:01
choin

choin

回复 锅锅锅锅 :
真实坑,按照你说的这样也不行
2021-01-02 08:37
l***@jiuqi.com.cn

l***@jiuqi.com.cn

请问为什么和后端约定的传值的key后面要加index?
2020-02-25 17:44
r***@sohu.com

r***@sohu.com (作者)

回复 锅锅锅锅 :
如果你的接口是接收单个文件的,确实会出现这个问题。请确认接口是批量上传图片的。并且在html中文件域上传测试无误
2019-10-19 11:41
锅锅锅锅

锅锅锅锅

为什么我这里报错。 uploadFile:fail parameter error: parameter.filePath should be String instead of Undefined;parameter.name should be String instead of Undefined;,用filePath和name 单个图片上传可以,用这个files:就会报错··
2019-10-17 17:49