Как исправить «Файл не был отправлен».при попытке загрузить файл с помощью django Rest framework и РЕАГИРОВАТЬ с Axios

Question

Я пытаюсь просто загрузить файл (и имя файла) с помощью / Django rest framework и REACT / Axios, и я не понимаю, что я делаю неправильно.

У меня есть этоошибка:

request.response: "{" my_file ": [" Файл не был отправлен. "]}"

Это мой интерфейс REACT:

uploadFile = e => {
    e.preventDefault();
    let formData = new FormData();
    formData.append('my_file', e.target.files[0]);
    axios.post('http://127.0.0.1:8000/uploadFiles/', {
        formData,
        name: 'name',
        headers: {
            Accept: 'application/json, text/plain, */*',
            'Content-Type': 'multipart/form-data'
        },
    })
        .then(() => {
            console.log('All Done',);
        })
        .catch(error => {
            console.log('error.response: ', error.response);
        });
}

render() {
    return (
        <input
            type='file'
            onChange={this.uploadFile}
        />
    );
}

Это мой бэкэнд REST от Django с:

models.py:

def user_directory_path(instance, filename):
    # file will be uploaded to MEDIA_ROOT/user_<id>/<filename>
    return 'user_{0}/{1}'.format(instance.user.id, filename)

class File(models.Model):
    my_file = models.FileField(upload_to=user_directory_path)
    name = models.CharField(null=False, max_length=50)
    upload_date = models.DateTimeField(auto_now_add=True)

сериализаторами.py

класс FileSerializer (serializers.ModelSerializer):

class Meta:
    model = File
    fields = (
        'id',
        'my_file',
        'name',
        'upload_date',
    )

views.py

class UploadFileView(views.APIView):
    parser_classes = (JSONParser, MultiPartParser, FormParser,)

    def post(self, request, *args, **kwargs):
        fileSerializer = FileSerializer(data=request.data)
        if fileSerializer.is_valid():
            fileSerializer.save()
            return Response(fileSerializer.data, status=status.HTTP_201_CREATED)
        else:
            return Response(fileSerializer.errors, status=status.HTTP_400_BAD_REQUEST)

У меня былСложно написать этот код, и я думаю, что я близок к концу, но не могу понять, почему этот файл не отправлен.

Answer 1

Вот модификации для загрузки:

uploadFile = e => {
    let formData = new FormData();
    formData.append('my_file', e.target.files[0]);
    formData.append('name', 'var name here');
    const url = 'http://127.0.0.1:8000/uploadFiles/';
    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }
    axios.post(url, formData, config)
        .then(() => {
            console.log('All Done',);
        })
        .catch(error => {
            console.log('error: ', error);
            console.log('error.response: ', error.response);
        });
}

Источник вдохновения