在單頁應用程序中上傳文件

Question

目前我正在用 ES6 + PHP 構建一個單頁應用程序，並且在 ajax 調用方面遇到了一些問題。 我找不到任何通過 fetch API 上傳文件的例子，老實說，我不知道 ajax 調用是否應該像這樣，因為如何在 PHP 中讀取數據。

像這樣的事情應該向后端發送一個表單。 這是我到目前為止所得到的，但它不起作用，也想不出一個干凈的解決方案:(

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

好吧，您可以稍微簡化一下 FETCH 語句。 fetch 的好處之一是它會嘗試為您應用正確的內容類型。由於您還嘗試上傳文件，因此您需要將_ajaxData作為 FormData() 對象傳遞。 此外，除非您傳遞一些自定義標題或想要自己定義內容類型，否則您不需要標題。 這是一個用於上傳一些數據的示例 fetch 語句。

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
});

甚至更好地使用 async/await

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')
}