非Vue/React环境下使用Axios上传文件至数据库失败问题排查

问题根源 #

• 前端：通过document.getElementById("file").value只能获取文件的本地路径字符串，并非实际文件对象；直接传递普通JSON对象时，Axios默认使用application/json请求头，无法携带文件数据。
• 后端：用json_decode(file_get_contents('php://input'),true)解析请求仅适用于JSON格式请求体，但文件上传需要multipart/form-data格式，这种场景下PHP会自动将表单数据存入$_POST、文件数据存入$_FILES，无需手动解析php://input。

修正后的前端代码 #

<script>
var submit1 = document.getElementById("submit");
submit1.addEventListener("click", function(e){
    e.preventDefault();
    var email1 = document.getElementById("email").value;
    // 获取文件对象而非路径字符串
    var fileObj = document.getElementById("file").files[0];
    // 创建FormData对象承载表单与文件数据
    var formData = new FormData();
    formData.append('usEmail', email1);
    formData.append('usF2', fileObj);
    
    var url = "apply2.php";
    // 无需手动设置Content-Type，让浏览器自动处理multipart/form-data边界
    axios.post(url, formData)
    .then(function(res){
        alert(res.data);
    })
    .catch(function(error){
        alert("erre");
    });
});
</script>

修正后的后端代码 #

// 直接使用PHP自动填充的$_POST和$_FILES，无需手动解析请求体
$e = mysqli_real_escape_string($conn, $_POST['usEmail']);

// 先校验文件上传状态
if(isset($_FILES["usF2"]) && $_FILES["usF2"]["error"] == 0){
    $filet1 = rand(1000, 10000) . "-" . $_FILES["usF2"]["name"];
    $tname1 = $_FILES["usF2"]["tmp_name"];
    $uploads_dir1 = '../files';
    
    // 确保上传目录存在，不存在则创建
    if(!is_dir($uploads_dir1)){
        mkdir($uploads_dir1, 0755, true);
    }
    
    if(move_uploaded_file($tname1, $uploads_dir1 . '/' . $filet1)){
        $sql = "INSERT into applyey(email,file) VALUES('$e','$filet1')";
        // 执行SQL并处理结果
        if(mysqli_query($conn, $sql)){
            echo "提交成功";
        } else {
            echo "数据库插入失败: " . mysqli_error($conn);
        }
    } else {
        echo "文件上传失败";
    }
} else {
    echo "文件未上传或上传出错: " . $_FILES["usF2"]["error"];
}

额外注意事项 #

• 确保HTML文件输入框设置正确的name属性：<input type="file" id="file" name="usF2">，否则后端无法通过$_FILES["usF2"]获取文件。
• 检查../files目录权限，确保PHP拥有读写权限（通常设置为755）。
• 建议使用PHP预处理语句替代直接拼接SQL，避免注入风险。

内容的提问来源于stack exchange，提问作者Dolms Pansag