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根据实际需要写,不一定要。

解决!!!

 

我的这个方法不一定完全正确,只是记录一下自己的解决办法,希望看到的同行根据自己需要修改问题。谢谢!

posted @ 2022-09-24 13:24  liuw_flexi  阅读(1210)  评论(0编辑  收藏  举报