Hochladen von Dateien in Einzelseiten-Anwendungen

Question

Momentan baue ich eine einzelne Seite Anwendung in ES6 + PHP und habe ein paar Probleme mit Ajax-Anrufe. Ich kann kein Beispiel für Dateiuploads über die Fetch-API finden und ehrlich gesagt habe ich keine Ahnung, ob Ajax-Aufrufe so aussehen sollten, weil ich die Daten in PHP lesen kann.

So etwas sollte ein Formular an das Back-End senden. Diese ist das, was ich so weit gekommen, aber es funktioniert nicht und denken, kann nicht von einer sauberen Lösung :(

JS:

const headers = new Headers({ 
    'Accept':'application/json', 
    'Content-Type':'application/json' 
}); 

class User{ 
    constructor(){ 
     this._ajaxData = {}; 
    } 

    /** 
    * @param {object} curObj 
    * @param {int} curObj.ID 
    * @param {HTMLElement} curObj.InputDate 
    * @param {HTMLElement} curObj.Username 
    * @param {HTMLElement} curObj.UploadFile = <input type='file'> 
    */ 
    collectInputData(curObj){ 
     this._ajaxData = { 
      UserID: curObj.ID, 
      ChangeDate: curObj.InputDate.value, 
      Username: curObj.Username.value, 
      SomeFile: curObj.UploadFile 
     }; 
    } 

    doAjax(){ 
     let _ajaxData = this._ajaxData; 
     let request = new Request("ajax/saveUser.php", { 
      method : "POST", 
      headers: headers, 
      body : JSON.stringify(_ajaxData) 
     }); 

     fetch(request).then(function (res) { 
      return res.json(); 
     }).then(function (data) { 
      console.log(data); 
     }); 
    } 
} 

PHP:

require_once __DIR__.'/../vendor/autoload.php'; 
$PDO = \DBCon::getInstance(); 

$data = json_decode(file_get_contents('php://input')); 

$PDO->beginTransaction(); 

$_FILES["fileToUpload"]["name"] 

$User = new \User(); 
$User->setUserID($data->UserID); 
$User->setChangeDate($data->ChangeDate); 
$User->setUsername($data->Username); 
/** 
* to use like with $_FILES["fileToUpload"] 
* 
* @param array $data->SomeFile 
*/ 
$User->setUploadFiles($data->SomeFile); 


$User->save(); 
try{ 
    $PDO->commit(); 
    echo true; 
}catch(PDOException $e){ 
    echo $e->getMessage(); 
} 

Answer 1

Nun, Sie Sie können Ihre FETCH-Anweisung ein wenig vereinfachen.Ein schönes bei Fetch ist, dass es versucht, den richtigen Inhaltstyp für Sie anzuwenden.Während Sie auch versuchen, eine Datei hochzuladen, müssen Sie Ihre _ajaxData als FormData übergeben() object.Auch Sie brauchen die Header nicht, es sei denn Sie sind Übergeben Sie einige benutzerdefinierte Header oder möchten Sie den Inhaltstyp selbst definieren. Hier ist eine Beispiel-Fetch-Anweisung, um einige Daten hochzuladen.

let _ajaxData = new FormData(); 
_ajaxData.append("UserID", curObj.ID); 
_ajaxData.append("ChangeDate", curObj.InputDate.value); 
_ajaxData.append("Username", curObj.Username.value); 
_ajaxData.append("SomeFile", document.getElementById("fileInputId").files[0]) 

let saveUser = fetch("ajax/saveUser.php", { 
    method: "POST", 
    body: _ajaxData 
}); 

saveUser.then(result => { 
    //do something with the result 
}).catch(err => { 
    //Handle error 
}); 

Oder noch besser nutzen async/erwarten

const saveUser = async (_ajaxData) => { 
    let results = await fetch("ajax/saveUser.php", { 
     method: "POST", 
     body: _ajaxData 
    }); 
    if(results.ok){ 
     let json = await results.json(); 
     return json; 
    } 
    throw new Error('There was an error saving the user') 
}