时间戳

首页 > 解决方案 > 如何修复从 angular 7 到 django rest 的上传文件

django - 如何修复从 angular 7 到 django rest 的上传文件

问题描述

我用djago开发了rest api，用agular7开发了应用程序前端，当我尝试将图像与表单数据一起发送时，我尝试将图像上传到我的rest api，但api中的表单数据为空。

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

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 为空

标签： djangoangular7

解决方案

它对我有用可能是这有助于你找到你的解决方案

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)

在尝试了这个之后，除了你得到错误之外，阅读 DRF 解析器（https://www.django-rest-framework.org/api-guide/parsers/）

“如果您使用 chrome 并且如果 r 使用http://127.0.0.1:8000/用于 django 服务器和 localhost:4200/ 用于 angular 比因为 CORS（不同端口） chrome 不允许，那么重要的一点。使用这个 127.0.0.1： 4200/ 用于角度服务器而不是 localhost:4200/ 如果您不想这样做，请使用 firefox 而不是 chrome 它允许 CORS

推荐阅读