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

我想将图像上传到我的后端。我需要发送三件事与这个图像 - 文件（网址）和标题。我尝试过这样做，但得到错误说400错误的请求。在网络选项卡中我看到这样尝试通过ajax上传文件时的错误请求

响应这是我的代码

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) => { 

     }); 
    }

来源

2017-05-13 ApurvG

400错误意味着服务器无法理解请求。问题在于服务器端，服务器期望的以及接收的内容不计算。原因是您只能将formData作为** only **数据发送到服务器，如果您想添加更多信息，则必须将其附加到您要发送的formData对象。 – adeneo

似乎你没有给你的数据变量赋值（即'videoURL'，'formData'，'selectedFile.name'），请仔细检查它们。如果该值存在，那么后端中的某些内容可能会关闭。 – Gerry

@adeneo但后端期待三个字段。我如何通过追加来做到这一点？ – ApurvG

从头文件中删除内容类型和我更新的问题中的代码解决了问题。以下是代码

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) => { 

    }); 
}

来源

2017-05-13 20:11:27 ApurvG

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

回答

相关问题