Question

你好，所以我正在Django和React项目上工作，我对这个领域还很陌生，我不明白为什么它不起作用，所以我很想向我的API发出POST请求并将内容保存到数据库，之后用于检索数据库中内容的功能将完成其工作，以更新网站。

因此，在发出POST请求后，这就是我登录控制台时得到的响应：

Response { type: "cors", url: "http://127.0.0.1:8000/api/upload-lecture/", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }

我个人认为状态码为200后，一切都很好，但是当我去检查数据库时，并没有添加任何新内容。

我什至检查了即将到来的Django日志，这也是我得到的：

"POST /api/upload-lecture/ HTTP/1.1" 200 108

所以我不明白为什么内容不在数据库中。

我的Api代码：上传方法：

@api_view(['POST'])
def videoUpload(request):

    serializer = LectureVideosSerializer(data=request.data)

    if serializer.is_valid():
        serializer.save()
    return Response(serializer.data)

要执行的代码：这是我尝试发出POST请求的地方

import React, { useState } from 'react';


const VideoUploadForm = () =>{

    const [lecturer, setLecturer] = useState('');
    const [module, setModule] = useState('');
    const [video, setVideo] = useState();
    const [date, setDate] = useState('');


    const newVideo = () =>{

        const uploadData = new FormData();
        uploadData.append('lecturer', lecturer);
        uploadData.append('module', module);
        uploadData.append('video', video);
        uploadData.append('date', date);

        fetch('http://127.0.0.1:8000/api/upload-lecture/', {

            method:'POST',
            body:uploadData

        }).then(response => console.log(response)).catch(error => console.log(error))

    }

    const handleLecturer = (e) =>{

        setLecturer({

            lecturer: e.target.value
        })
    }

    const handleModule = (e) =>{

        setModule({

            module: e.target.value
        })
    }

    const handleVideo = (e) =>{

        setVideo({

            video: e.target.files[0]
        })
    }

    const handleDate = (e) =>{

        setDate({

            date: e.target.value
        })

    }

    return(
        <div className="form__container">

            <label>
                Lecturer:
                <input type="text" onChange={handleLecturer} placeholder="Lecturer uploading"/>
            </label>

            <label>
                Module:
                <input type="text"  onChange={handleModule} placeholder="Module of Video Uploaded"/>
            </label>

            <label>
                Video:
                <input type="file"  onChange={handleVideo}/>
            </label>

            <label>
                Date:
                <input type="text"  onChange={handleDate} placeholder="YY-mm-dd"/>
            </label>

            <button onClick={() => newVideo()}>Upload Video</button>
        
        </div>
    )
}

export default VideoUploadForm;

这是我打印出序列化程序错误时遇到的错误

[*] Error:{'video': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')], 'date': [ErrorDetail(string='Date has wrong format. Use one of these formats instead: YYYY-MM-DD.', code='invalid')]}

我该如何解决

Answer 1

对于日期，请确保您具有错误中提到的格式，对于文件上传，我通常使用MultiPartParser，您可以使用parser_classes装饰器进行设置。

无法从ReactJS向Django发出POST请求

1 个答案: