put方法中的Angularjs文件上传不起作用

Question

我有一个简单的待办事项应用程序，我试图在其中上传一张照片和一个待办事项。现在我创建了这个负责创建待办事项的工厂函数

  todosFactory.insertTodo = function(todo){
    return $http.post(baseUrl, todo, {
      headers: {
        'Content-Type' : undefined
      },
      transformRequest: function(data, headersGetter){
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });
        return formData;
      }
    });
  };

而工厂更新方法是这样的

  todosFactory.updateTodo = function(id, todo){
    return $http.put(baseUrl + '/' + id, todo, {
      headers: {
        'Content-Type' : undefined
      },
      transformRequest: function(data, headersGetter){
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });
        return formData;
      }
    });
  };

insertTodo 正在按预期工作，但 updateTodo 未将数据发布到服务器。我使用 laravel 作为 API，更新 API 端点有这个代码

dd(Input::all(), Input::file('cover_photo'));

这表明在请求中发布了注释。如果我将 put 更改为在 updateTodo 工厂方法中发布，它就会开始工作。我是否缺少一些额外的标题或其他内容？

更新

如果我从 updateTodo 方法中同时删除 transformRequest 和 headers，文本数据会在服务器上成功接收，但文件没有。
如果我只是删除 headers 什么都没有发布了

更新

我正在使用 laravel 自带的 PHP 服务器使用这个命令

php artisan serve

更新

感谢@Ricardo 的回答，我能够使用此代码获取提交的数据

router->put('/todos/{id}', function($id){
    $stream = file_get_contents("php://input");
    echo $stream;
    die();
});

我正在获取这种格式的流

-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="id"

5
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="name"

Image Todo
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="complete"

0
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="created_at"

2015-10-02 06:28:10
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="updated_at"

2015-10-02 06:28:10
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="cover_photo"; filename="Dragon-Falls-Venezuela-5.jpg"
Content-Type: image/jpeg

�����JFIF��H�H������Exif��MM�*�����i������������������z���,����UNICODE��C�R�E�A�T�O�R�:� 
�g�d�-�j�p�e�g� �v�1�.�0� �(�u�s�i�n�g� �I�J�G� �J�P�E�G� �v�6�2�)�,� �q�u�a�l�i�t�y� �=� �9�0�

现在我需要解析这种原始格式。我找到了其他人建议的两种 php 方法 http://php.net/manual/en/function.mb-parse-str.php 和 http://php.net/manual/en/function.parse-str.php 但它们都不能正常工作并且不提供像 $_GET 或 $_POST 这样的数组。

Answer 1

This piece from the PHP documentation 讨论 PUT 方法和文件上传（multipart/form-data）。

我不能引用其中的任何部分，因为我认为一切都很重要。您应该详细阅读它，但总结一下，如果不更改您的 Apache 配置和创建辅助脚本，这是不可能的。

对于 Laravel，您应该使用 Form Method Spoofing（基本上是一个名为 _method 的变量）并继续使用 POST。 _method 将允许您正确调用 Laravel 的 PUT 操作。

---

编辑

默认情况下，AngularJS 以 JSON 格式发送数据，这解释了为什么您无法使用 $_POST 全局访问数据。我已经在another question 中回答了这个问题，它解释了你必须做什么。

Answer 2

我认为您必须在服务器端序列化文件，如果您发送文件，则附加自定义标头并在服务器端适当地处理该标头请求。

Answer 3

预先创建formData -> 你不需要变压器。
将 transformRequest : angular.identity 添加到您的 HTTP 标头。 您的代码应该类似于下面的 sn-p：

$http.post('/api/endpoint', formData, {
  transformRequest : angular.identity,
  headers: {'Content-Type': undefined}
})
.success(function (data) {
  // do stuff with data
})
.error(function (error) {
  // recover from an error
});

Angular 身份只不过是吐回您的表单数据：https://docs.angularjs.org/api/ng/function/angular.identity