Question

我想知道如何获取php脚本来检索我的base64编码图像然后写入服务器？我尝试从我的PHP脚本进行转储后转发，我不断得到一个空的响应。我已经尝试过关于此的一些其他stackoverflow指南，但没有一个使用工厂afaik。

JS

var app = angular.module("app", ["ui.bootstrap"]);

//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory('API', function ($http) {  
    return {
    uploadImage: function (image) {
            return $http.post('/js/upload.php', image);
    }
    }
});

app.controller('MainController',['$scope', '$http', 'API', function($scope, $http, API) {
    $scope.imageUrl = "";
    $scope.template = "";
    $scope.templates = [
    'select an option...',
    'MakeGray',
    'Canny'
    ];

    $scope.template = $scope.templates[0];

    $scope.add = function() {

    var f = document.getElementById('fileToUpload').files[0];  // name of image
    var files = document.getElementById('fileToUpload').files;
    var r = new FileReader();

    r.onload = function(event){
            console.log(event.target.result);
    }

    r.onloadend = function(e) {

            var data = e.target.result;
            var formData = new FormData();     

        $("#img1").prop("src", data);
        $("#img2").prop("src", data);

            formData.append("fileToUpload", f,f.name);

            API.uploadImage(formData)
        .success(function (imgUrl) {
            $scope.imageUrl = imgUrl;
        })
        .error (function (error) {
        });
    }

    r.readAsDataURL(f);
    }
}]);

PHP

<?php

if(isset($_FILES['fileToUpload'])){    
  $errors= array();        
  $file_name = $_FILES['fileToUpload']['name'];
  $file_size =$_FILES['fileToUpload']['size'];
  $file_tmp =$_FILES['fileToUpload']['tmp_name'];
  $file_type=$_FILES['fileToUpload']['type'];  
  $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
  $extensions = array("jpeg","jpg","png");        
  if(in_array($file_ext,$extensions )=== false){
    $errors[]="image extension not allowed, please choose a JPEG or PNG file.";
  }
  if($file_size > 2097152){
    $errors[]='File size cannot exceed 2 MB';
  }              
  if(empty($errors)==true){
    move_uploaded_file($file_tmp,"../uploads/".$file_name);
    echo " uploaded file: " . "images/" . $file_name;
  }else{
    print_r($errors);
  }
}
else{
  $errors= array();
  $errors[]="No image found";
  print_r($errors);
}
?>

Answer 1

Angular对上传感到特别关注。

首先，你必须知道，有角度的默认 transformRequest 函数会尝试序列化我们的FormData对象，所以我们用身份函数覆盖它以离开数据完好无损。

接下来，POST请求的默认内容类型标题是＆＃34; application / json＆＃34;，因此您必须更改此项，因为您要上传文件。通过设置＆＃39; Content-Type＆＃39 ;: undefined ，浏览器会自行将Content-Type设置为multipart / form-data，并填入正确的边界。手动设置＆＃39;内容类型＆＃39;：multipart / form-data 将无法填写请求的边界参数。

查看其他可能的问题：https://docs.angularjs.org/api/ng/service/$http

现在，您可以从$ _POST全局PHP数组中获取图像。

固定代码

UNION

注意：

以下服务使用IE9及更早版本不支持的FormData对象。

如何将base64编码的图像传递给php？

1 个答案: