尝试通过ajax上传文件时出现错误请求

Question

我正在尝试将图片上传到我的后端。我需要发送这个图像的三件事 - 文件（网址）和标题。我试过这样做，但收到错误说400坏请求。在网络标签中，我看到这样的回复

这是我的代码

posterFile = e.target.files;
selectedPoster = posterFile[0];


uploadPoster() {
        var blobPosterFile = selectedPoster;
        console.log("U called me?")
        var formData = new FormData();
    formData.append("fileToUpload", blobPosterFile);

    var that = this;
    let token;
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://www.backend.sample.forexom.com/api/v1/videos/",
        "method": "POST",
        processData: false,
        "credentials": 'include',
        "headers": {
            Authorization: "Token " + that.props.token_Reducer.token
        },
        "data": {
            "file": JSON.stringify(videoURL),
            "poster": formData,
            "title": JSON.stringify(selectedFile.name)
        },
        success:( response, textStatus, jQxhr )=> {
            //this.props.tokenAction(response.auth_token);
            console.log("poster uploaded")
        }
    }

    $.ajax(settings).done((response) => {

    });
}

更新

尝试将其他数据附加到formData，但是得到相同的错误

uploadPoster() {
        var blobPosterFile = selectedPoster;
        console.log("U called me?")
        var formData = new FormData();
        formData.append("file", videoURL)
        formData.append("poster", blobPosterFile);
        formData.append("title", selectedFile.name)

        var that = this;
        let token;
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://www.backend.trigger.tessact.com/api/v1/videos/",
            "method": "POST",
            processData: false,
            "credentials": 'include',
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
                Authorization: "Token " + that.props.token_Reducer.token
            },
            "data": formData,

            success:( response, textStatus, jQxhr )=> {
                //this.props.tokenAction(response.auth_token);
                console.log("poster uploaded")
            }
        }

        $.ajax(settings).done((response) => {

        });
    }

Answer 1

从标题中删除内容类型，我更新的问题中的代码解决了这个问题。这是代码

uploadPoster() {
        var blobPosterFile = selectedPoster;
        console.log("U called me?")
        var formData = new FormData();
        formData.append("file", videoURL)
        formData.append("poster", blobPosterFile);
        formData.append("title", selectedFile.name)
    var that = this;
    let token;
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://www.backend.trigger.tessact.com/api/v1/videos/",
        "method": "POST",
        processData: false,
        "credentials": 'include',
        "headers": {

            Authorization: "Token " + that.props.token_Reducer.token
        },
        "data": formData,

        success:( response, textStatus, jQxhr )=> {
            //this.props.tokenAction(response.auth_token);
            console.log("poster uploaded")
        }
    }

    $.ajax(settings).done((response) => {

    });
}