javascript - 使用 PHP 和 AngularJS 上传图像

Question

我正在开发一个管理面板，它将使用 AngularJS 和 PHP 在 SQLite DB 上添加数据，然后以 HTML 形式显示。数据作为数组文本日期等一切都很好。我遇到的问题是在指定文件夹中上传图像并将路径存储在我的数据库中。

这是我的 PHP，它将数据存储在数据库中

<?php

try {

    if (
        empty($_POST['item']) ||
        empty($_POST['description']) || 
        empty($_POST['release']) || 
        empty($_POST['demo']) ||
        empty($_POST['type']) ||
        empty($_POST['live']) ||
        empty($_POST['client'])
        ) {
        throw new PDOException("Invalid Request");
        }

    $item = $_POST['item'];
    $description = $_POST['description'];
    $release = $_POST['release'];
    $demo = $_POST['demo'];
    $type = $_POST['type'];
    $live = $_POST['live'];
    $client = $_POST['client'];

    $objDb = new PDO('sqlite:../database/database');
    $objDb->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "INSERT INTO 'items'
            ('id', 'item', 'description', 'release', 'demo', 'type', 'live', 'client')
            VALUES (null, ?, ?, ?, ?, ?, ?, ?)";

    $statement = $objDb->prepare($sql);

    if (!$statement->execute(array($item, $description, $release, $demo, $type, $live, $client))) {
        throw new PDOException("The execute method failed");
    } 

这是我的 PHP，它在指定文件夹中上传图像

<?php

if (isset($_POST['submit'])) {

    $validextensions = array("jpeg", "jpg", "png");
    $temporary = explode(".", $_FILES["file"]["name"]);
    $file_extension = end($temporary);

    if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
            ) && ($_FILES["file"]["size"] < 1000000)
            && in_array($file_extension, $validextensions)) {

        if ($_FILES["file"]["error"] > 0) {
            echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
        } else {

            echo "<span>Your File Uploaded Succesfully...!!</span><br/>";
            echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
            echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
            echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
            echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";


            if (file_exists("upload/" . $_FILES["file"]["name"])) {
                echo $_FILES["file"]["name"] . " <b>already exists.</b> ";
            } else {
                move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
                echo "<b>Stored in:</b> " . "upload/" . $_FILES["file"]["name"];
            }

        }
    } else {
        echo "<span>***Invalid file Size or Type***<span>";
    }
}
?>

这是我从 Angular 插入的函数

$scope.insert = function() {

        if ($scope.goodToGo()) {

        var thisData = "item=" + $scope.item;
        thisData += "&description=" + $scope.description;
        thisData += "&release=" + $scope.release;
        thisData += "&demo=" + $scope.demo; 
        thisData += "&client=" + $scope.client;
        thisData += "&type=" + $scope.type;
        thisData += "&live=" + $scope.live;
        thisData += "&image=" + $scope.image;

        $http({
            method : 'POST',
            url : urlInsert,
            data : thisData,
            headers : {'Content-Type' : 'application/x-www-form-urlencoded'}
        })

        .success(function(data){
            if(_recordAddedSuccessfully(data)){
                $scope.items.push({

                    id : data.item.id,
                    item : data.item.item,
                    description : data.item.description,
                    release : data.item.release,
                    demo : data.item.demo,
                    client : data.item.client,
                    client_name : data.item.client_name,
                    type : data.item.type,
                    type_name : data.item.type_name,
                    live : data.item.live,
                    live_name : data.item.live_name,
                    image : data.item.image,
                    done : data.item.done

                });

                $scope.clear();

            }
        })
        .error(function(data, status, headers, config){
            throw new Error('Something went wrong with inserting');
        });

        }
    };

有人知道如何做到这一点吗？

Answer 1

如果您要上传图像，则内容类型应设置为multipart/form-data，即

headers : {'Content-Type' : 'multipart/form-data'}

休息看起来不错。