uniapp上传文件在iOS端上传之后后端接收为空问题
在做uniapp上传图片给后台时,参考了:https://www.10qianwan.com/articledetail/767914.html
在h5,安卓上都没问题。但是iOS上上传之后,后台接受一直为空。一直找不到解决办法,于是自己写了一个简单的springboot项目,用uni.uploadFile上传,发现了问题所在。
这是我的springboot项目controller中写给前端的接口代码
@PostMapping("/profilePhotoUpload") public String profilePhotoUpload(@RequestParam("hehe") MultipartFile fileUpload, @RequestParam("author") String autherName){ }
注意这里的意思:后端的意思是根据"hehe"这个key获取到文件,根据"author"这个key获取到请求的接口参数。这一点很重要!!!
这是我前端的代码:
upLoadBtnClick(){ let _this = this uni.chooseImage({ count: 1, // 选择数量限制 sizeType: ['compressed'], // 原图、压缩图 sourceType: ['album', 'camera'], // 相册、拍照选择 success: async (res) => { console.log(res); //TODO:上传文件结果要path 和 文件内容 两个参数 //h5选择出来是:blob:http://localhost:7777/41b40b92-bc73-4f77-b2da-fa77e386d34c let tempFilePathsArr = res.tempFilePaths _this.avatorUrl = tempFilePathsArr[0] _this.avatorFile = res.tempFiles[0] uni.showLoading({ title:'上传中' }) uni.uploadFile({ url: 'http://127.0.0.1:8090/profilePhotoUpload', //仅为示例,非真实的接口地址 filePath: tempFilePathsArr[0], name: 'hehe', file:res.tempFiles[0], formData:{ 'author': "哥哥", }, header: { "content-type": "multipart/form-data" // 'content-type':'application/x-www-form-urlencoded' }, success: (uploadFileRes) => { uni.hideLoading() console.log("uploadFileRes====="); console.log(uploadFileRes.data); }, fail: (err) => { uni.hideLoading() console.log(err); } }); }, complete() { console.log("complete"); }
}) },
看到了吗?我指定了文件对象+其他接口参数
name: 'hehe', file:res.tempFiles[0],
formData:{ 'author': "哥哥", },
我并没有把文件对象放在其他接口参数中。也就是我并没有写成这样:
formData:{ 'author': "哥哥", 'hehe':res.tempFiles[0] },
这样写是无法请求发送给后端的,反正我在iOS 设备上是发送不了的。另外header根据实际需要写,不一定要。
解决!!!
我的这个方法不一定完全正确,只是记录一下自己的解决办法,希望看到的同行根据自己需要修改问题。谢谢!
此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935.
我的gitHub: (学习代码都在gitHub)
https://github.com/nwgdegitHub/