React Native向预签名URL上传图片时出现Network Error如何解决

错误原因&修正方案 #

你代码里存在4个明确的问题，按优先级修正即可：

• 变量名拼写错误：函数入参是小写id，拼接URL时错误使用了未定义的大写ID，会直接导致请求地址非法
• FormData结构不符合React Native上传要求：本地文件转FormData时必须补充name字段，仅传uri和type会被识别为非法文件对象
• 认证头格式错误：Bearer认证的标准格式为Bearer ${token}，你多写了一个冒号，会导致身份校验直接失败
• 手动指定Content-Type多余：axios会自动识别FormData类型的请求体，自动生成带boundary边界参数的multipart/form-data头，手动指定反而会因为缺少boundary导致请求格式错误

修正后的代码如下：

export function SetImage(image, id, token) {
    const formData = new FormData();
    formData.append('file', {
        uri: image.uri,
        type: image.type,
        name: image.uri.split('/').pop() // 从uri中提取文件名作为name字段值
    })

    return axios({
        method: 'PUT',
        url: axios.defaults.baseURL + "/api/SetImage/"+id, // 修正为小写id
        headers: {
            'Authorization': 'Bearer ' + token, // 去掉多余的冒号
        },
        data: formData
    })
}

如果修正后仍然报错，可额外排查两个点：

• 确认后端接口是否支持PUT方法接收form-data格式数据，部分文件上传接口默认仅支持POST请求
• 确认运行设备/模拟器和后端服务在同一网络环境，且baseURL配置正确可正常访问

内容的提问来源于stack exchange，提问作者user9210692