Невозможно получить данные формы из Frontend с помощью React / Django - PullRequest
Новая
       52

Невозможно получить данные формы из Frontend с помощью React / Django

0 голосов
/ 16 июня 2020

Я работал над приложением в стиле Pinterest, где пользователи могут загружать булавки вместе с изображением. После создания «FileView», который представляет собой API, который загружает полученный файл на S3 и предоставляет веб-интерфейсу полученный URL-адрес изображения, я успешно протестировал Postman. Ниже приведены мой фрагмент кода views.py и снимок экрана с запросом Postman.

views.py 

class FileView(View):
    s3_client = boto3.client(
        's3',
        aws_access_key_id=ACCESS_KEY,
        aws_secret_access_key=SECRET_ACCESS_KEY
    )

    @login_required
    def post(self, request, **kwargs):

        user        = kwargs['user']
        user_id     = kwargs['user_id']
        name        = request.POST.get('title')
        paragraph1  = request.POST.get('text', None)
        board       = request.POST.get('board', 1)
        board       = Board.objects.get(id=board)
        print(request.FILES)
        if request.FILES == None:
            return JsonResponse({"message": "REQUEST FILES IS EMPTY"}, status=406)
        file        = request.FILES['filename']

        self.s3_client.upload_fileobj(
            file,
            "pinterrorist",
            file.name,
            ExtraArgs={
                "ContentType": file.content_type
            }
        )

        image_url       = S3URL+file.name
        image_url       = image_url.replace(" ", "+")
        new_pin         = Pin.objects.create(
            image_url   = image_url,
            name        = name,
            paragraph1  = paragraph1,
            board       = board
        )
        new_pin.user.add(user)

        new_pin = model_to_dict(new_pin, fields=["image_url", "name", "paragraph1", "board"])

        return JsonResponse({"new_pin": new_pin})

POSTMAN screenshot

Однако когда я пытаюсь решить это с помощью внешнего интерфейса, запрос не отправляет go через views.py. Он проходит через декоратор, что означает, что с токеном авторизации заголовка все в порядке. Я поискал в Интернете способы исправить это, но один из них упомянул, что мне нужно избавиться от заголовков, но я не могу этого сделать, потому что запрос ДОЛЖЕН содержать заголовки с токеном авторизации.

Ниже приведен код, созданный моим коллегой с помощью REACT. 

const savePins = () => {
    const fd = new FormData();
    fd.append("filename", uploadedfile);
    fd.append("title", title);
    fd.append("text", imgDes);
    fetch("http://10.58.0.207:8000/pin-builder", {
      method: "POST",
      headers: {
        // "content-type": "multipart/form-data",
        "Content-Type":
          "multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIM",
        Authorization:
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjIifQ.kg_TKT_XrRsqMRGUSAac5Uonq3STzSLDlt9d5ZbRzFw",
      },
      body: fd,
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect");
        console.log(res);
      } else {
        alert("Oops");
        console.log(res);
      }
    });}

Когда она отправляет запрос, я попытался выяснить, в какой части он отправляет ошибку. Я использовал pdb, чтобы найти деталь: 

django.utils.datastructures.MultiValueDictKeyError: 'filename'
> /Users/woohyunan/projects/Wecode/pinterrorist-backend/pin/views.py(90)post()
-> file        = request.FILES['filename']

Что-то не так с кодом внешнего интерфейса (реакции) или внутреннего интерфейса (django)? Я ничего не знаю о программировании REACT, но я хотел бы знать, как это исправить, чтобы я мог продолжать работать над этим проектом с интерфейсными инженерами.

Заранее большое спасибо!

...