react-native-image-picker不上传到服务器

Question

export const updateUserAvatarResponse = async data => {

const resp = await fetch(config.domain + '/api/users/update/avatar/', {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + data.access,
    },
    body: new FormData('avatar', {
        type: 'image/jpeg',
        uri: data.avatar.uri,
        name: 'filename.jpg',
        // data: data.avatar,
    }),
});

return await resp.json();

}；

updateAva = async () => { const options ={ title：‘选择头像’，// noData: false，storageOptions：{ // skipBackup: true，path：'images'，}，// multiple: true，// includeExif: true，

    };

    ImagePicker.showImagePicker(options, (response) => {
        if (response.uri) {
            this.setState({
                imageData: response.uri,
                data: response
            });
            this.uploadImage();
        }
    });
};

uploadImage = async () => {
    const access = await getAccessToken();

    const resp = await updateUserAvatarResponse({
        access: access,
        avatar: this.state.data
    });

    console.log(this.state.data);

    console.log(resp);
};

但是得到这个错误enter image description here

Answer 1

这里的实际问题是：

body: new FormData('avatar', {
    type: 'image/jpeg',
    uri: data.avatar.uri,
    name: 'filename.jpg',
    // data: data.avatar,
}),

您正试图通过传递无效参数来创建FormData的新实例。根据documentation of FormData的说法，这种创建FormData的方法在传递可以从document.getElementById获得的HtmlElement时是有效的(例如)。

在您的案例中，创建FormData的正确方法是：

let data = new FormData();
data.append('avatar', {
   type: 'image/jpeg',
   uri: data.avatar.uri,
   name: 'filename.jpg',
});