2017-01-06 4 views
0

免責事項:私はPHPについてほとんど知っています。私はちょうどそれで遊ぶようになったばかりです。バックエンドでサイレックス・ベースのPHPアプリでAJAX POSTリクエスト経由でファイルをアップロードし

背景:私はクライアント側でjavascript、バックエンドでPHPを使用してファイルをアップロードしたいと思います。バックエンドでは、私はSilex PHPのマイクロフレームワークを試しています。

クライアントコード:

HTML

<form id="fileform"> 
    <input id="filefield" type="file" multiple="multiple" /> 
    <input type="submit" /> 
</form> 

ジャバスクリプト

var form = document.querySelector('#fileform'); 
var fileField = document.querySelector('#filefield'); 
form.addEventListener('submit', formSubmit, false); 


function formSubmit(e) { 
    e.preventDefault(); 

    let formData = new FormData(); 
    let file = fileField.files[0]; 
    formData.append('uploadedFile', file); 

    let config = { 
    method: 'POST', 
    mode: 'cors', 
    cache: 'default', 
    headers: { 
     'Content-Type': false 
    }, 
    body: formData 
    }; 

    fetch('http://localhost:8000/uploads/test', config).then((response) => { 
    console.log('submitted!'); 
    }); 
} 

バックエンドコード:

のphp(サイレックス・ベースのアプリケーションのコントローラ)

use Symfony\Component\HttpFoundation\Request; 

$uploads->post('/test', function (Request $request) use ($app) { 

    $file = $request->files->get('uploadedFile'); 
    if ($file == NULL) { 
    return 'null'; 
    } else { 
    return 'not null'; 
    } 
}); 

問題:私は$request->filesオブジェクト内の名前「にUploadedFile」を持つファイルを持っていることを期待しますが、どちらかの何がそこに存在しないコントローラは$file == NULLが真であると信じているので、または私は、アップロードされたファイルに到達する方法がわかりません。

健全性チェックとして、私は、コントローラから$request->getContent()を戻し、ブラウザに結果を検査しました。

enter image description here

をバックエンドは名前'uploadedFile'で、フォームの内容を取得しているようなので、それは思えるん:ここでは、バックエンドが取得しているものです。では、私はバックエンドで何が間違っているのですか?このアップロードされたファイルをSilexコントローラでどのように入手できますか?

それはすべてのようにひどく混乱します。助けてください!

答えて

0

[OK]を、エラーが私はfetchに渡したconfigオブジェクトに間違ったヘッダによって引き起こされた後、すべての:-)、それはPHPの問題ではありませんでしたが判明したが、JavaScriptの質問:

headers: { 
    'Content-Type': false 
}, 

Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8,ru;q=0.6 
Cache-Control:no-cache 
Connection:keep-alive 
Content-Length:363123 
content-type:multipart/form-data; boundary=----WebKitFormBoundaryzUZXCxORC35rae15 
Host:localhost:8000 
Origin:null 
Pragma:no-cache 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36 

私はそれが含まれている場合、私は文字通りなるContent-Typeヘッダ、台無し:

私はこの部分を省略した場合、要求ヘッダーは

content-type:false 

だからええ、それは私の間違いでした。奇妙なことに、私は、どこかでajaxリクエストを準備するときにcontent-typeヘッダーをfalseに設定することを推奨していたことをはっきりと覚えているからです。

関連する問題