react-native 附件上传参数[object Object] 上传附件失败的原因(form-data)

末蓝、 2022-11-21 17:31 585阅读 0赞

控制台会提醒： Network Inspect and using \`uri\` in FormData, it will be a problem if you use it for upload

### React-native中，打开debugger-ui查看接口信息时，无法成功上传附件 ###

因为使用的是form-data上传附件，如果在debugger-ui查看，看到的请求体参数会是**\[object Object\]**，默认被工具转换掉，导致附件请求参数变成字符串**\[object Object\]**，而非file格式。

因此，附件上传失败！！！

> PS：需要注意的是，这种情况下，后端无法通过抓包工具抓取到请求信息（如果上传的是附件对象），因为参数错误，没有办法请求成功，但是在debugger-ui工具上查看network接口信息，会是状态码200，并且成功返回服务器返回的信息，这可能是被代理转发失败了

### 解决办法: 关闭debugger-ui，使用debugger断点 ###

下面是一些数据提示（摘抄自其它博主）：

近遇到react native中需要上传一些图片到后台.期间,找了一些第三方上传插件,感觉不太好用,要么只支持一个平台,要么会对其他第三方造成影响,实在无奈.只能直接使用fetch上传.其中上传文件只需要图片的绝对路径即可,可能RN底层会帮我们把图片转为流传输

/*
     *
     *   上传图片请求
     *   @param
     *   @returns
     * */
    
    uploadImage(imgAry) {
        let formData = new FormData();<br>       //因为需要上传多张图片,所以需要遍历数组,把图片的路径数组放入formData中
        for(var i = 0;i<imgAry.length;i++){
            let file = {uri: imgAry[i], type: 'multipart/form-data', name: 'image.png'};   //这里的key(uri和type和name)不能改变,
            formData.append("files",file);   //这里的files就是后台需要的key
        }
        fetch('http://192.168.0.183:8080/whale/test/upload_files',{
            method:'POST',
            headers:{
                'Content-Type':'multipart/form-data',
            },
            body:formData,
        })
            .then((response) => response.text() )
            .then((responseData)=>{
                console.log('responseData',responseData);
            })
            .catch((error)=>{console.error('error',error)});
    }

其中,关于图片的路径,我的是这样的:

iOS:

file:///Users/shaotingzhou/Library/Developer/CoreSimulator/Devices/9462ED30-88C7-4318-BF83-3914B9314D34/data/Containers/Data/Application/E9A05CAF-AF07-4BA3-B2C3-C2EFBC6C2C6A/Documents/images/D5E1640B-836A-4EC9-A5C2-65B2E4E8CFE0.jpg

Android:

file:///storage/emulated/0/Pictures/image-ec0667ed-ecc5-4eed-928f-26fed6a63860.jpg

上传成功截图:

![dcee11ec92ed0e82bbf46ddf62834745.png][]![945c162caddef1e95fc6803a60547326.png][]

[dcee11ec92ed0e82bbf46ddf62834745.png]: https://img-blog.csdnimg.cn/img_convert/dcee11ec92ed0e82bbf46ddf62834745.png
[945c162caddef1e95fc6803a60547326.png]: /images/20221120/2b2b68c42ad9494c83e34233d97bdd22.png