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

Question

我有一个 React Native android 应用程序和一个 Django REST API。使用 react-native-image-picker，用户能够 select 一张图片，并且该图片成功显示在 React Native 应用程序中。

不过，我想把它上传到API。为此，我发送了一个 axios 请求。当我发送图像为 null 的请求时，请求已成功响应。但是，当用户 select 发送图像时，此请求会出现以下错误： [错误：请求失败，状态代码为 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 中，用户 selects。当用户 select 从 phone 的图库中获取图像时，图像 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 服务器

Not able to upload images to Django Server using React Native app

django

android

uri

react-native

axios