如何解决从angular 7到django rest的上传文件问题

Question

我用djago开发了rest api，用agular7开发了application front，我尝试上传图片到rest api，当我尝试用表单数据发送时，表单数据在api中是空的。

对于Angular，我尝试用文件发送表单数据。

Angular:
   getPredictionImage(file): Observable<any> {
      const HttpUploadOptions = {
        headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data'})
      }
      const f = new FormData();
      f.append('image', file, file.name);
      console.log(f);
      return this.http.post(this.urlapiimage, file, HttpUploadOptions);
    }

Django:
    def post(self, request, format=None):
        print("heloooo")
        print(request.data)
        serializer = MammographySerializer(data=request.data)
        print(serializer)
        if serializer.is_valid():
            result='hi'
            serializer.save()
            return Response(result,status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

request.data是空的

Answer 1

它的工作对我来说可能是这个帮助你找到你的解决方案。

Angular :
upload(file): Observable<any> {
  let csrftoken  = getCookie('csrftoken');
  let headers = new HttpHeaders({

    'Access-Control-Allow-Origin': '*',
    'X-CSRFToken': csrftoken,

  });
  const formdata = new FormData();
   formdata.append("image", file); //i did not use 3rd argument file.name
  let options = {
    headers: headers,  withCredentials :true  } 
  return this.http.post(this.urlapiimage , formdata,  options )

}

Django:
    def post(self, request, format=None):
       if 'file' not in request.data:
            raise ParseError("Empty content ")

        photo = request.data["file"]
        serializer = MammographySerializer(photo = photo) // use this instead data =request.data
        if serializer.is_valid():
            result='hi'
            serializer.save()
            return Response(result,status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

在尝试这个之后，比你也r得到错误，阅读关于DRF解析器( https:/www.django-rest-framework.orgapi-guideparsers)

"重要的一点，如果你使用chrome，如果你使用的是 http:/127.0.0.1:8000。 使用127.0.0.1:4200代替localhost:4200，如果你不想这样做，使用firefox代替chrome，它允许CORS。