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

【问题标题】：Not able to upload images to Django Server using React Native app无法使用 React Native 应用程序将图像上传到 Django 服务器
【发布时间】：2020-11-05 03:35:15
【问题描述】：

我有一个 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 Administration 上传图片时，它会按要求成功上传图片。

这是上传此图片的 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"}

有人有解决办法吗？或者实际上可能导致错误的原因是什么？

【问题讨论】：

标签： android django react-native axios uri

【解决方案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
        })

【讨论】：

取决于您使用的选择器库 - uri、名称和类型响应对象可以不同，您可以使用随机名称和预期类型
谢谢我试过了，现在它没有给出 400 错误，但现在它显示了这个网络错误：[错误：网络错误]你知道可能导致什么现在的问题？
不能肯定。尝试使用邮递员，看看它是否给出了一些与服务器相关的错误，或者尝试记录错误响应以查看服务器返回的消息
感谢您的帮助！我搜索了这个，现在问题解决了。 This 帮助了。实际上我上传的图像是 base64 编码的，Django REST 默认不支持它。所以，我按照给定链接中的步骤操作，图片上传成功。