如何将图像从反应原生应用程序（Expo）上传到 django 服务器

Question

我正在使用 expo 图像选择器让用户将图片上传到 Django 服务器，但我遇到了一个错误，即我上传的图像始终为空。发布请求通过，但图像从未存储，但似乎仍以某种方式发送。从我读过的内容来看，我需要将图像上传为base64，因此我将选择器设置为在base64中获取图像，而我一直使用uri进行上传，但我仍然在数据库记录中得到一个空图像字段。

上传网址path('feed/', views.ListCreatePost.as_view(), name="post_feed"),

const [image, setImage] = useState(null);

    useEffect(() => {
        (async () => {
            if (Platform.OS !== 'web') {
                const { status } = await ImagePicker.requestCameraRollPermissionsAsync();
                if (status !== 'granted') {
                    alert('Sorry, we need camera roll permissions in order to make a post!');
                }
            }
        })();
    }, []);

    let postForm = new FormData();

    const makePost = async ()  => {
           try{
               console.log('salvo');
               console.log(image);
               let photo = {
                   uri: image.uri,
                   type: 'image/*',

               };
               console.log('photo');
               console.log(photo);
               postForm.append('user_id', user);
               postForm.append('content', content);
               postForm.append("image", photo);

               let response = await fetch('https://mdrn02.herokuapp.com/api/v1/feed/',
                   {
                       method: 'POST',
                       headers: {
                           Accept: 'application/json',
                           'Content-Type': 'multipart/form-data'
                       },
                       body: postForm
                   });
               console.log('response');
               console.log(response);
               let json = await response.text();

               console.log('response json post');
               console.log(json);


           } catch (error){
               console.log('error posting');
               console.log(error);
               Alert.alert(
                   "Error in fields",
                   "Try again",
                   [{text: 'Close'}]
               );
           }
        };

    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
            base64: true
        });

        console.log(result);

        if (!result.cancelled) {
            setImage(result.uri);
        }
    };

型号

class Post(models.Model):
    user_id = models.ForeignKey('User', on_delete=models.CASCADE)
    time = models.DateTimeField(auto_now_add=True)
    content = models.CharField(max_length=280)
    image = models.ImageField(upload_to='posts/', null=True, blank=True)

查看

class ListCreatePost(generics.ListCreateAPIView):
    queryset = models.Post.objects.all()
    serializer_class = serializers.PostSerializer

序列化器

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        fields = (
            'id',
            'user_id',
            'time',
            'content',
            'image'
        )
        model = models.Post

编辑： 我相当肯定错误在于 javascript，以及数据如何发送到服务器。

Answer 1

如果您不介意安装其他依赖项，我建议您安装出色的 drf-extra-fields 软件包。这允许您向序列化程序添加 base64 字段（以及许多其他字段）：

from drf_extra_fields.fields import Base64ImageField

class PostSerializer(serializers.ModelSerializer):
    image = Base64ImageField()

    class Meta:
        fields = (
            'id',
            'user_id',
            'time',
            'content',
            'image'
        )
        model = models.Post