Django：不支持的媒体类型答案

【问题标题】：Django: Unsupported media typeDjango：不支持的媒体类型
【发布时间】：2022-06-25 20:13:08
【问题描述】：

我正在尝试将图像从 react 发送到 django rest 框架，这是我到目前为止所尝试的，它给出了不支持的媒体类型错误，我不确定问题是在后端还是前端部分。为了让它发挥作用，我还应该做什么？

后台

views.py

class ImageView(APIView):
    permission_classes=[permissions.IsAuthenticated]
    parser_classes=[MultiPartParser,FormParser]

    def post(self,request,format=None):
        print(request.data)
        serializer=ImageSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save();
            return Response(status=200)

serializer.py

class ImageSerializer(serializers.ModelSerializer)  :
    class Meta:
        model=Images;
        fields=['image']

models.py

def upload_to(instance,filename):
    return 'images/{filename}'.format(filename=filename)

class Images(models.Model):
    image=models.ImageField(upload_to=upload_to)

settings.py

MEDIA_ROOT=BASE_DIR.joinpath('media')
MEDIA_URL='/media/'

前端

Send_file.js

const Send_file=()=>{
    const send_data=(e)=>{
        e.preventDefault();
      
        let data={
            'image':e.target[0].files[0]
        }
        axios.post(`${BASE_URL}/upload_image/`,data,config)

    }
    return <>
    <form  enctype='multipart/form-data' onSubmit = {send_data}>
        <input  type='file'/>
        <button type='submit'>SEND FILE</button>
    </form>
    </>
}

【问题讨论】：

标签： reactjs django-rest-framework

【解决方案1】：

我认为您需要在 ImageSerializer 中设置 FileField。

class ImageSerializer(serializers.ModelSerializer):
    upload_image = serializers.FileField(max_length = 10000000, allow_empty_file = False, use_url = False, write_only = True)

    class Meta:
        model = Images
        fields = ('upload_image', 'image')

    def create(self, validated_data):
        image_source = validated_data.pop('upload_image')
        new_image = Images.objects.create(image = image_source)
        return new_image

并且请将 Send_file.js 中数据对象中的image 键更改为upload_image。

const Send_file=()=>{
    const send_data=(e)=>{
        e.preventDefault();
      
        let data={
            'upload_image':e.target[0].files[0]                 # here 
        }
        axios.post(`${BASE_URL}/upload_image/`,data,config)

    }
    ...
}

【讨论】：