反应原生上传图像文件到 django 后端答案

【问题标题】：React native upload image file to django backend反应原生上传图像文件到 django 后端
【发布时间】：2020-05-12 22:26:56
【问题描述】：

您好，我想将照片发布到 django 后端。我可以很容易地用邮递员发帖。但我不能用原生反应来做到这一点。这是我的发帖请求：

handleSubmit(photoUri){
    let formData = new FormData();
    formData.append('file',photoUri);
    formData.append('name', 'a');
       fetch('http://localhost:8000/test/', {
      method: 'POST',
      body:formData,
    }).then(res => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch(err => console.log(err));
  }

在这篇文章中，django 序列化器是这样的：

FileSerializer(data=<QueryDict: {'file': ['file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Ftez2-1599e0c7-8863-4da6-b20f-5e6e94be9342/Camera/b2116349-cdfb-4309-8d6e-51c9a36be4fb
.jpg'], 'name': ['a']}>):

但是使用邮递员是这样的：

FileSerializer(data=<QueryDict: {'name': ['a'], 'file': [<InMemoryUploadedFile: a.jpg (image/jpeg)>]}>):

我认为问题出在 InMemoryUploadedFile 上，我无法通过本机反应以这种形式上传文件。我该怎么做？

【问题讨论】：

标签： django react-native django-rest-framework

【解决方案1】：

我明白回答这个问题太晚了。

但你可以试试这个：

handleSubmit(photoUri){
    let formData = new FormData();
    const photo_data = { // Edit Here
        uri : image_path_here // Edit Here,
        name : image_name // Edit Here, Image Name with Extension very important
        type : 'image/jpg' // Edit Here
    }
    formData.append('file', photo_data ); // Edit Here
    formData.append('name', 'a');
       fetch('http://localhost:8000/test/', {
      method: 'POST',
      body:formData,
    }).then(res => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch(err => console.log(err));
  }

【讨论】：

【解决方案2】：

我首先找到了答案，我需要发布有问题的对象，我只发布字符串。第二件事是脚蹼版本 0.33.1 中存在一些问题，您无法发布图像。您需要升级，或者您可以在 ReactNativeFlipper.java 中解决并注释此行

// builder.addNetworkInterceptor(newFlipperOkhttpInterceptor(networkFlipperPlugin));

更多详细信息请看这里：https://github.com/facebook/react-native/issues/28551#issuecomment-624347067

第三个问题是在 android 平台上，你需要像这里一样修复 uri：Photo upload on React Native Android produce Type Error Network Error

我在这个问题中遇到了这些问题。

【讨论】：