用 axios 反应原生上传图片

Question

我有这个数据 来自 react-native-image-picker

data: "/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2Qtan" => 90kb
fileName: "77677.jpg"
fileSize: 67542
height: 600
isVertical: true
originalRotation: 0
path: "/storage/emulated/0/Download/77677.jpg"
type: "image/jpeg"
uri: "content://media/external/images/media/18584"
width: 399
__proto__: Object

我尝试将此数据设置为对象类型#FromData 以上传#img

var binaryDataInBase64 = new FormData();
        binaryDataInBase64.append('file', {
            // data: response.data,
            uri: 'file://' + response.uri,
            name: 'MMM.jpg',
            type: response.type
        })
        console.log('=======================>', binaryDataInBase64)
        axios.post(
            'https://danskeclouddemo.com/api/file',
            { file: binaryDataInBase64 },
            { headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'multipart/form-data'  } }
        ).then(res => {
            console.log(res)
        }).catch(error => {
            console.log(error)
        })

这是后端邮递员工作良好Postman collection

//======================= //======================= 编辑

有人说0.61.5之后的react native版本的问题 在这个链接issues

Answer 1

你的表单数据一定是这样的。

formdata.append('file',{
    uri: Platform.OS === 'android' ? photo.uri : 'file://' + photo.uri,
    name: 'test',
    type: 'image/jpeg' // or your mime type what you want
});

然后

axios.post('/users/profilepic', formdata, config).then((res) => {
    console.log(res.data);
    return res.data;
  });

Answer 2

而不是使用，axiom 使用 fetch 简单，方法来上传，图像

this.setState({imageLoading:true})
    const credentials={
       userId:this.state.userId
    }
    try {
      let response = await fetch(
        'url',
        {
            'method': 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
            },
             body: createFormData(source, credentials)
        }
      );
      
      if (response.status == 200) {
            response.json().then(data => {
            
            switch (data.status) {
                case 200:
                   
                    break;
            }
         });
      }else {
        this.setState({imageLoading:false ,isLoading:false})
             }
    } catch (error) {
      this.setState({imageLoading:false,isLoading:false})
      console.error(error);
    }


const createFormData=(image,body)=>{
var data = new FormData();
data.append(image, {
uri:  Platform.OS === "android" ? image.uri : image.uri.replace("file://", ""), 
name: `dummy${Date.now()}.jpg`,
type: 'image/*'
})


Object.keys(body).forEach(key => {
    data.append(key, body[key]);
});
return data
}