Angular提交表单数据

Angular submit form data

本文关键字：数据 表单 提交 Angular      更新时间：2023-09-26

我使用ng流库将图像加载到服务器，在用户拖放图像后，我可以将HTML5文件图像下载到我的控制器，我需要将其与其他参数一起下载到服务器，如货币、主题等。我在谷歌上搜索了一下，发现最好的方法是转换为json形式的数据并使用POST方法发送。当我从服务器得到响应时，我看到表单数据包含主题，但不包含图像。可能出了什么问题？

在以下代码中，url是真实的，您可以尝试获得自己的响应。

角度代码：

 var file = $flow.files[0];
 $http({
            method: 'POST',
            url: "http://yuppi.com.ua/server/rest/add.php?key=453sdfg3t&action=add",            
            headers: { 'Content-Type': false },
            transformRequest: function (data) {
                 var formData = new FormData();
                 formData.append("subject",  angular.toJson(data.subject));
                 formData.append("file", data.file);
                 return formData;                
            },
            data: { subject: subject, file: file}
        }).
        success(function (data, status, headers, config) {
            alert(data);
        }).
        error(function (data, status, headers, config) {
            alert(data);
        });

PHP代码：

$form = file_get_contents("php://input");
echo "Form: ";  print_r($form);

$_FILES 的var_dump

"array(1) {
  ["photo"]=>
  array(5) {
    ["name"]=>
    string(14) "gradient-2.png"
    ["type"]=>
    string(9) "image/png"
    ["tmp_name"]=>
    string(14) "/tmp/phpY8nqji"
    ["error"]=>
    int(0)
    ["size"]=>
    int(442567)
  }
}

您应该将表单数据发送到控制器，请尝试以下操作：

数据：｛主题：主题，数据：表单数据｝

而且你需要首先定义formData才能通过$http发送

var file = $flow.files[0]; 
var formData = new FormData();
 $http({
            method: 'POST',
            url: "http://yuppi.com.ua/server/rest/add.php?key=453sdfg3t&action=add",            
            headers: { 'Content-Type': false },
            transformRequest: function (data) {
                 formData.append("subject",  angular.toJson(data.subject));
                 formData.append("file", data.file);
                 return formData;                
            },
            data: { subject: subject, data: formData}
        }).
        success(function (data, status, headers, config) {
            alert(data);
        }).
        error(function (data, status, headers, config) {
            alert(data);
        });

对于php部分，你可以使用我写的这个函数：

function uplFile($fn,$path='upload/'){ 
    $delim = explode(';base64,',$fn);
    $type = str_replace('data:','',$delim[0]);
    switch ($type) { 
        case "image/gif": 
            $type = '.gif';
            break; 
        case "image/jpeg": 
            $type = '.jpg';
            break; 
        case "image/png": 
            $type = '.png';
            break; 
        case "image/bmp": 
            $type = '.bmp';
            break; 
    } 
    $data = base64_decode($delim[1]);  
    $file = uniqid() .$type;
    $success = file_put_contents($path.$file, $data);
    return $file;
}

此函数获取formData（）内容作为第一个参数，并获取第二个参数的上传位置。对于您的数据，您可以按照以下方式轻松使用：

uplFile($_POST['file']);
相关文章：