播放框架文件上傳不起作用（React/Scala）

Question

我正在嘗試將文件從 React 前端上傳到 Scala/Play Framework 后端，但它不工作。

所以我有一個上傳文件並調用handleUpload的按鈕：

handleUpload=()=>{
    if(this.state.file!=null){
      console.log('value of this.state.file: ', this.state.file)
      var dataSend = new FormData();
      dataSend.append('file_upload', this.state.file); 
      console.log('value of dataSend before send: ', dataSend);
      this.setState({lastCommand: 'file_upload'}, ()=>{
        this.props.sendRequest({
          url: "http://localhost:9000/upload",
          method: "post",
          multipart: true,
          data:{
            payload:{
              data: dataSend
            }
          }
        });
      })
    }
  }

this.props.sendRequest在我的操作（Redux）中，如下所示：

export const request = payload => {
  return function(dispatch) {
    console.log("value of payload in actions request: ", payload)
    var config = {}
    if (payload.method=="post"||payload.method=="patch"){
      config = {
        url:    payload.url,
        method: payload.method,
        withCredentials: true,
        data:   payload.data,
      }
      if('multipart' in payload && payload.multipart){
        config.headers = { 'Content-Type': 'multipart/form-data' }
      }
    }else if (payload.method=='get'){
      config = {
        url:    payload.url,
        method: payload.method,
        withCredentials: true,
      }
    }

    console.log('value of config before send in actions/request: ', config);

    axios(config)
    .then(response=>{
      return dispatch({
        val: response,
        type: (payload.method=="post"||payload.method=="patch")?"POST_RETURN_SUCCESSFUL":"GET_RETURN_SUCCESSFUL", 
        sentID: ('sentID' in payload)?payload.sentID:null
      })
    })
    .catch(error=>{
      console.log('there was an error in request return in actions', error);
      return dispatch({
        val: error,
        type: (payload.method=="post"||payload.method=="patch")?"POST_RETURN_ERROR":"GET_RETURN_ERROR",
        sentID: ('sentID' in payload)?payload.sentID:null
      })
    });
  };
}

這是上面記錄的控制台的配置值：

value of config before send in actions/request:  
{…}
​
data: {…}
​​
payload: {…}
​​​
data: FormData {  }
​​​
<prototype>: Object { … }
​​
<prototype>: Object { … }
​
headers: {…}
​​
"Content-Type": "multipart/form-data"
​​
<prototype>: Object { … }
​
method: "post"
​
url: "http://localhost:9000/upload"
​
withCredentials: true

請注意，雖然表單數據似乎為空，但這是 web 控制台無法顯示它的偽影（ 如何檢查 FormData？ ）

這應該在我的游戲框架中達到以下路線（在我的config/routes文件中定義）：

+nocsrf
POST    /upload        controllers.PostController.admin_upload

其中+nocsrf只是一個防止跨站點請求偽造的處理程序。

注意：我發送到前端的 url “ http://localhost:9000/upload ” 。

我上傳的 function controllers.PostController.admin_upload是一個簡單的hello_there

def admin_upload[T]:Action[AnyContent] = Action.async {request: Request
  [AnyContent] => Future { 
      println("****************************")
      println("inside admin_upload")
      println("****************************")
      var responseVal = new Response().standard_response("/admin/patch", "DUMMY - STILL WORKING ON ROUTE")
      Ok(responseVal)
    }(ec)
  }

我在后端沒有控制台日志記錄，並且在前端收到400 NOT FOUND錯誤。

這是我的網絡請求標頭：

Host: localhost:9000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: multipart/form-data
Content-Length: 23
Origin: http://localhost:3000
Connection: keep-alive
Referer: http://localhost:3000/admin
Cookie: PLAY_SESSION=SUPERDOOPERSECRETDAWG

和響應頭：

HTTP/1.1 400 Bad Request
Vary: Origin
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
X-Permitted-Cross-Domain-Policies: master-only
Date: Wed, 13 Nov 2019 17:08:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 1170

我完全迷路了，這應該工作。

什么壞了？

編輯：

如果我在 axios 請求中刪除Content-Type header 並控制台輸出結果，我確實會進入admin_upload function，因為我沒有發送表單，因為我當然沒有發送請求正文。 所以我將問題縮小到“如何發送正確的內容類型標志來播放框架？”

****************************
inside admin_upload
****************************
value of request.body: 
AnyContentAsJson({"payload":{"data":{}}})
request.body.asMultipartFormData
None

編輯編輯：

即使是最簡單的示例，如下所示： https://www.playframework.com/documentation/2.7.x/ScalaFileUpload

似乎不起作用。

  def admin_upload = Action(parse.multipartFormData) { request =>
    println("****************************")
    println("inside admin_upload")
    println("****************************")
    println(request.body)
    var responseVal = new Response().standard_response("/admin/patch", "DUMMY - STILL WORKING ON ROUTE")
    Ok(responseVal)
  }

編輯編輯編輯：

好的 - 這在 Insomnia中確實有效，但我的配置不正確。 這意味着問題是axios無法正常工作，我將向他們發送錯誤報告。

Answer 1

解決方案是在我的請求處理程序中進行剪切，並使用fetch而不是axios進行文件上傳。 像這樣：

export const request = payload => {
  return function(dispatch) {
    console.log("value of payload in actions request: ", payload)
    var config = {}
    if('multipart' in payload && payload.multipart){
      config = {
        method: "POST",
        body: payload.data
      }
      fetch("http://localhost:9000/upload", config)
      .then(response => response.json())
      .then(response => {
        console.log("inside success in fetch and value of response: ", response)
        return dispatch({
          val: response,
          type: "POST_RETURN_SUCCESSFUL"
        })
      })
      .catch(error =>{
        console.log('there was an error in request return in actions', error);
        return dispatch({
          val: error,
          type: "POST_RETURN_ERROR"
        })
      });
    }else{
      if (payload.method=="post"||payload.method=="patch"){
        config = {
          url:    payload.url,
          method: payload.method,
          withCredentials: true,
          data:   payload.data,
        }
      }else if (payload.method=='get'){
        config = {
          url:    payload.url,
          method: payload.method,
          withCredentials: true,
        }
      }
      console.log('value of config before send in actions/request: ', config);

      axios(config)
      .then(response=>{
        return dispatch({
          val: response,
          type: (payload.method=="post"||payload.method=="patch")?"POST_RETURN_SUCCESSFUL":"GET_RETURN_SUCCESSFUL", 
          sentID: ('sentID' in payload)?payload.sentID:null
        })
      })
      .catch(error=>{
        console.log('there was an error in request return in actions', error);
        return dispatch({
          val: error,
          type: (payload.method=="post"||payload.method=="patch")?"POST_RETURN_ERROR":"GET_RETURN_ERROR",
          sentID: ('sentID' in payload)?payload.sentID:null
        })
      });
    }
  };
}

Axios 存在文件上傳問題。 見這里： https://github.com/axios/axios/issues/318

解決方法是使用 fetch。