Symfony无法从AngularJS视图中获取上载的文件

Question

现在已经3天了，我使用angularjs将ajax文件上传到symfony2应用程序。

我正在使用我的symfony应用程序作为API来向我的角度前端提供数据。我可以发布文字等，但我不能从正面到背面发布文件。

使用chrome插件DHC，我可以发布一张图片并从我的$ request变量中检索对象，但是Angular是一个死胡同。

我尝试过使用dropzoneJS，ng-file-upload服务等，但它没有做到这一点。知道我回来了基本隐藏的iframe，仍然无法正常工作。实际上，似乎即使有帖子，请求也会在到达后端时更改为GET。

我的php控制器处于这样的状态，我决定从头开始。

到目前为止，这是我的代码：

角度视图：

<div class="uploadTest">
    <form id="file_upload_form" method="post" enctype="multipart/form-data" action="/submission" ng-submit="submit()">
        <input name="file" id="file" size="27" type="file">
        <input type="submit" name="action" value="Upload">
        <iframe id="upload_target" name="upload_target" src="" style="width:580px;height:580px;border:2px solid red;"></iframe>
    </form>
</div>

角度控制器：

angular.module('mondialatorApp').controller('UploadCtrl', ['$scope', function ($scope){
    $scope.submit = function(){
        document.getElementById('file_upload_form').target = 'upload_target';
    }
}]);

我的php控制器（空的sice我不在哪里）：

class SubmissionController extends Controller{
    public function addAction(Request $request){
        return new Response('done');
    }
}

我的路由文件：

mondialator_submission_add:
    path: submission/
    defaults: {_controller: MDMondialatorBundle:Submission:add}

最后是$ request内容

object(Symfony\Component\HttpFoundation\Request)[7]
  public 'attributes' =>
    object(Symfony\Component\HttpFoundation\ParameterBag)[10]
      protected 'parameters' =>
        array (size=3)
          '_controller' => string 'MD\MondialatorBundle\Controller\SubmissionController::addAction' (length=63)
          '_route' => string 'mondialator_submission_add' (length=26)
          '_route_params' =>
            array (size=0)
              ...
  public 'request' =>
    object(Symfony\Component\HttpFoundation\ParameterBag)[8]
      protected 'parameters' =>
        array (size=0)
          empty
  public 'query' =>
    object(Symfony\Component\HttpFoundation\ParameterBag)[9]
      protected 'parameters' =>
        array (size=0)
          empty
  public 'server' =>
    object(Symfony\Component\HttpFoundation\ServerBag)[13]
      protected 'parameters' =>
        array (size=23)
          'DOCUMENT_ROOT' => string 'C:\wamp\www\mondialator\web' (length=27)
          'REMOTE_ADDR' => string '127.0.0.1' (length=9)
          'REMOTE_PORT' => string '53110' (length=5)
          'SERVER_SOFTWARE' => string 'PHP 5.5.12 Development Server' (length=29)
          'SERVER_PROTOCOL' => string 'HTTP/1.1' (length=8)
          'SERVER_NAME' => string '127.0.0.1' (length=9)
          'SERVER_PORT' => string '8000' (length=4)
          'REQUEST_URI' => string '/submission/' (length=12)
          'REQUEST_METHOD' => string 'GET' (length=3)
          'SCRIPT_NAME' => string '\app_dev.php' (length=12)
          'SCRIPT_FILENAME' => string 'C:\wamp\www\mondialator\web\app_dev.php' (length=39)
          'PHP_SELF' => string '\app_dev.php' (length=12)
          'HTTP_HOST' => string 'localhost:8000' (length=14)
          'HTTP_CONNECTION' => string 'keep-alive' (length=10)
          'HTTP_CACHE_CONTROL' => string 'max-age=0' (length=9)
          'HTTP_ACCEPT' => string 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' (length=74)
          'HTTP_UPGRADE_INSECURE_REQUESTS' => string '1' (length=1)
          'HTTP_USER_AGENT' => string 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36' (length=109)
          'HTTP_REFERER' => string 'http://localhost:8000/' (length=22)
          'HTTP_ACCEPT_ENCODING' => string 'gzip, deflate, sdch' (length=19)
          'HTTP_ACCEPT_LANGUAGE' => string 'fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4' (length=35)
          'REQUEST_TIME_FLOAT' => float 1454191109.4263
          'REQUEST_TIME' => int 1454191109
  public 'files' =>
    object(Symfony\Component\HttpFoundation\FileBag)[12]
      protected 'parameters' =>
        array (size=0)
          empty
  public 'cookies' =>
    object(Symfony\Component\HttpFoundation\ParameterBag)[11]
      protected 'parameters' =>
        array (size=0)
          empty
  public 'headers' =>
    object(Symfony\Component\HttpFoundation\HeaderBag)[14]
      protected 'headers' =>
        array (size=10)
          'host' =>
            array (size=1)
              ...
          'connection' =>
            array (size=1)
              ...
          'cache-control' =>
            array (size=1)
              ...
          'accept' =>
            array (size=1)
              ...
          'upgrade-insecure-requests' =>
            array (size=1)
              ...
          'user-agent' =>
            array (size=1)
              ...
          'referer' =>
            array (size=1)
              ...
          'accept-encoding' =>
            array (size=1)
              ...
          'accept-language' =>
            array (size=1)
              ...
          'x-php-ob-level' =>
            array (size=1)
              ...
      protected 'cacheControl' =>
        array (size=1)
          'max-age' => string '0' (length=1)
  protected 'content' => null
  protected 'languages' => null
  protected 'charsets' => null
  protected 'encodings' => null
  protected 'acceptableContentTypes' => null
  protected 'pathInfo' => string '/submission/' (length=12)
  protected 'requestUri' => string '/submission/' (length=12)
  protected 'baseUrl' => string '' (length=0)
  protected 'basePath' => null
  protected 'method' => string 'GET' (length=3)
  protected 'format' => null
  protected 'session' =>
    object(Symfony\Component\HttpFoundation\Session\Session)[124]
      protected 'storage' =>
        object(Symfony\Component\HttpFoundation\Session\Storage\NativeSessionStorage)[123]
          protected 'bags' =>
            array (size=2)
              ...
          protected 'started' => boolean false
          protected 'closed' => boolean false
          protected 'saveHandler' =>
            object(Symfony\Component\HttpFoundation\Session\Storage\Proxy\SessionHandlerProxy)[121]
              ...
          protected 'metadataBag' =>
            object(Symfony\Component\HttpFoundation\Session\Storage\MetadataBag)[122]
              ...
      private 'flashName' => string 'flashes' (length=7)
      private 'attributeName' => string 'attributes' (length=10)
  protected 'locale' => null
  protected 'defaultLocale' => string 'en' (length=2)

我在这里和网上浏览了很多话题，但我从来没有找到答案。我不能真正告诉它什么时候出错。

我希望你能帮助我，我不知道该怎么做，因为莱娅可能会说：“你是我唯一的希望”

Answer 1

您可以按照以下方式使用HTML 5：

在HTML中：

<div ng-controller="UploadCtrl">
  <form id="file_upload_form">
    <input type="file" id="file" name="file">
    <button ng-click="submit()">Submit</button>
  </form>
</div>

在Javascript中：

angular.module('mondialatorApp', []).controller('UploadCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.submit = function () {
        var f = document.getElementById('file').files[0],
        r = new FileReader();
        r.onloadend = function (e) {
            var data = e.target.result; // Contains the contents of your uploaded file
            var req = {
                method: 'POST',
                url: '//example.com/your-endpoint',
                headers: {
                    'Content-Type': 'some-type-spec'
                },
                data: data
            };
            $http(req).then(function (response) {
                // success callback
            }, function (response) {
                // error callback
            });
        }
        r.readAsBinaryString(f);
    }
}]);

请务必指定您希望在请求对象req的{​​{1}}密钥中发布数据的Symphony应用程序的API端点。