当尝试使用django Rest框架和REACT与Axios上传文件时，如何修复“没有提交文件。”

Question

我试图用/ Django rest框架和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}
        />
    );
}

这是我的Django REST后端：

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)

serializers.py

class 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);
        });
}

灵感的源泉