Question

我有一个react native android应用和Django REST API。使用react-native-image-picker，用户可以选择图像，并且该图像成功显示在react native应用程序中。

但是，我想将其上传到API。为此，我正在发送axios请求。当我发送图像为 null 的请求时，该请求具有成功的响应。但是，当用户选择图像时，此请求将产生以下错误： [错误：请求失败，状态码为400]

在Django API中，此图像定义为： image = models.ImageField(upload_to='media/Images/Groups/', null=True)

我知道这不是问题所在，因为当我从Django管理中心上传图片时，它会根据需要成功上传图片。

这是上传此图片的API请求（我知道这也不会引起问题）：

const axios = require("axios");
   await axios.post('http://the url..., {
       //other fields I'm adding here
       "image": this.state.gImage,
   })
   .then((response) => {
       console.log(response);
   }, (error) => {
       console.log(error);
});

我认为问题出在用户选择的图像的 uri 中。当用户从手机的图片库中选择图片时，该图片控制台上显示的uri（位于 this.state.gImage 中）为：

{"uri": "content://com.google.android.apps.photos.contentprovider/0/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F35531/ORIGINAL/NONE/image%2Fpng/613917948"}

有人可以解决吗？还是实际上可能导致该错误的原因？

Answer 1

我应该是这样的：

const form = new FormData();
form.append('other-field', 'xyz');
form.append('image', {
        uri: pickerResponse.uri,
        name: pickerResponse.name,
        type: pickerResponse.type
    });

axios.post('url', form)
        .then(res => {
            //response
        }).catch(err=>{
            //error
        })

无法使用React Native应用将图像上传到Django服务器

1 个答案: