Reactjs 从react前端上传带有DRF的图像

我想从react前端上传图像。我从DRF browsable api测试了api，它按预期工作

#views.py
class CreatePost(CreateAPIView):
    permission_classes = (permissions.AllowAny, )
    queryset = BlogPost.objects.all()
    serializer_class = BlogCreateSerializer

#serializers.py
class BlogCreateSerializer(serializers.ModelSerializer):

    class Meta:
        model = BlogPost
        fields = ('id', 'title', 'category', 'thumbnail',
                  'excerpt', 'content', 'author')

在反应方面

  const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });


<div className="form-group">
      <label htmlFor="exampleFormControlFile1">THUMBNAIL</label>
      <input
        type="file"
        className="form-control-file"
        name="thumbnail"
        value={thumbnail}
        onChange={(e) => onChange(e)}
        required
      />
    </div>



headers: {
  "Content-type": "multipart/form-data",
},

在控制台中请求有效负载

{"title":"dkjhksnc","category":"environment","thumbnail":"C:\\fakepath\\80dbf456adfc4e5499f86b04de37fad5.jpg","excerpt":"ewfewgrf ","content":"efewfewgw","author":"1"}

我对DRF和react都是新手。请看我如何上传我的博客文章的“缩略图”字段

如果您需要任何其他详细信息，请发表意见。

在前端： 在后端： 默认的django rest框架配置处理json和表单数据，因此您无需执行任何操作

假设这是您的端点：

@api_view(['POST'])
def my_view(request):
   s = MySerializer(request.data)
   s.is_valid(raise_exception=True)
   s.save()

就这样。您可以在模型上使用

ImageField

或

FileField

来存储图像。请注意，它实际上只存储url并将您的图像上载到存储后端，无论是文件系统（默认）还是任何其他后端，如amazon s3或google云存储。有关更多信息，请查看django存储库

该文件系统仅适用于开发。要使用它，您需要在设置文件中设置

MEDIA\u URL

和

MEDIA\u ROOT

：

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

就这样。如果希望在开发过程中能够通过浏览器预览图像，则需要将其添加到

url.py

，如图所示

@api_view(['POST'])
def my_view(request):
   s = MySerializer(request.data)
   s.is_valid(raise_exception=True)
   s.save()

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
   # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)