通过 Fetch 将文件发送到 Django REST Endpoint？答案

【问题标题】：Send File via Fetch to Django REST Endpoint?通过 Fetch 将文件发送到 Django REST Endpoint？
【发布时间】：2020-06-06 10:35:59
【问题描述】：

我正在尝试通过 Fetch 将文件上传到 Django REST 端点。

带有获取代码的组件：

function myComponent(props) {
  const classes = useStyles();
  const [{token}] = useContext();

  function handleImageUpload(files) {
    let formData = new FormData()
    formData.append('file', files[0])

    fetch(receiveSpreadsheetEndpoint, {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
    })
      .then(response => response.json())
      .then(data => {
        console.log(data)
      })
      .catch(error => {
        console.error(error)
      })
  }

  function Dropzone(props) {
    const [files, setFiles] = useState([]);

    function handleChange(event) {
      setFiles(event[0]);
    }

    return (
      <>
        <DropzoneArea
          onChange={event => handleChange(event)}
        />

        <Button
          variant="contained"
          color="primary"
          onClick={event => handleImageUpload([files])}
        >
          Primary
        </Button>
      </>
    )
  }

  return (
    <Container className={classes.root} height="100%">
      <Dropzone
        acceptedFiles={['.csv', 'text/*', 'text/csv']}
        showPreviews={true}
        showFileNamesInPreview={true}
      />

    </Container>
  );
}

Django REST 端点：

class ReceiveFileData(APIView):
    permission_classes = (IsAuthenticated,)
    parser_classes = (JSONParser, FormParser, MultiPartParser)

    def post(self, request):
        my_file = request.stream.read 

        data = {} <== a breakpoint is set here
        return Response(data, status=status.HTTP_200_OK)

在my_file = request.stream.read 之后，my_file 包含b''。

我遗漏了什么？

更新

这是到达服务器上 REST 端点时的请求对象：

【问题讨论】：

标签： django rest file-upload fetch fetch-api

【解决方案1】：

这正在工作。这是工作代码，以防对其他人有所帮助。

反应

import React, {useEffect, useRef, useState, Component} from 'react';
import 'typeface-roboto';
import {makeStyles} from '@material-ui/styles';
import {useContext} from "../../context";
import Container from "@material-ui/core/Container";
import {DropzoneArea} from 'material-ui-dropzone'
import Button from "@material-ui/core/Button";

//ENDPOINTS
const receiveSpreadsheetEndpoint = '/spreadsheet_generator/api/receive-spreadsheet/';

function UploadSpreadsheet(props) {
  const classes = useStyles();
  const [{token}] = useContext();

  function handleImageUpload(event, theFile) {
    event.stopPropagation();
    event.preventDefault();

    let formData = new FormData()
    formData.append('file', theFile)
    fetch(receiveSpreadsheetEndpoint, {
      method: 'POST',
      body: formData,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      .then(response => response.json())
      .then(data => {
        console.log(data)
      })
      .catch(error => {
        console.error(error)
      })
  }

  function Dropzone(props) {
    const [file, setFile] = useState(null);

    function handleChange(event) {
      setFile(event[0]);
    }

    return (
      <>
        <DropzoneArea
          onChange={event => handleChange(event)}
          filesLimit={1}
        />

        <Button
          variant="contained"
          color="primary"
          onClick={event => handleImageUpload(event, file)}
        >
          Primary
        </Button>

      </>
    )
  }

  return (
    <Container className={classes.root} height="100%">
      <Dropzone
        acceptedFiles={['.csv', 'text/*', 'text/csv']}
        showPreviews={true}
        showFileNamesInPreview={true}
      />
    </Container>
  );
}

//https://material-ui.com/components/buttons/
const useStyles = makeStyles(theme => ({
    root: {
      '& > *': {
        margin: theme.spacing(1),
      },
    },
  }))
;

export default UploadSpreadsheet;

DJANGO REST 端点

from rest_framework import status
from rest_framework.permissions import IsAuthenticated
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.parsers import FormParser, MultiPartParser, JSONParser, FileUploadParser
import logging

from server_modules.spreadsheet.models import SourceSpreadsheet

logger = logging.getLogger(__name__)

logging.basicConfig(
    level=logging.DEBUG,
    format='%(name)s %(levelname)s %(message)s',
)

def create_spreadsheet_record(file):
    # insert record to SourceSpreadsheet
    SourceSpreadsheet.objects.create(file=file)

class ReceiveData(APIView):
    permission_classes = (IsAuthenticated,)
    parser_classes = (FileUploadParser,)

    def post(self, request):
        success = True
        message = 'OK'
        file = request.stream.FILES['file']

        # save to db
        try:
            create__spreadsheet_record(file)
        except Exception as e:
            print("Error calling ReceiveData: " + str(e))
            message = str(e)
            success = False

        data = {'message': message }
        if (success):
            return Response(data, status=status.HTTP_200_OK)
        else:
            return Response(data, status=status.HTTP_400_BAD_REQUEST)

DJANGO 模型

class SourceSpreadsheet(models.Model):
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    file = models.FileField(upload_to='source_spreadsheets/%Y/%m')

BASE.PY 添加：

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

【讨论】：