前端上传文件到后台应该是个很常见的需求,相信很多小伙伴儿能很轻松的实现,今儿记录哈在uni-app 在做该功能时所遇到的一些问题~,看似简单的需求确隐藏了一些大坑,特此记录
这里用uni-app官网自带的方法 :uni.uploadFile(OBJECT)
方法使用官网介绍的很详细,上传单个文件的就不介绍了,主要看看下如何在一次http请求中上传多组文件的,文档说的很清楚,多组上传参数使用files,如下图,
注:这个参数只支持App和H5,小程序不支持的(一定要仔细看文档…)
1、看看参数files是个什么,如图所示
可以看到首先它是一个数组,数组中是个对象,对象有3个属性(name,file,uri).
上图中红色框内的就是本文重点说的两大坑。
坑1:file对象中虽表明name不是必传字段,但它是multipart提交时表单的名字,就是表单传到后端的参数名字,是需要与后台接收这个表单参数名一致的,默认为file,如果后台接口参数名不是file,请求报错400~,所以这个name必传且与后台接口参数名一致。
坑2:方法返参,看到回调success中data是一个字符串 ,并不是一个json对象,不能直接取值,所以这里需要用JSON.pase()方法来转换一下。
下面上代码截图:
前端:
后台: