簡體   English   中英

在put方法中Angularjs文件上傳不起作用

[英]Angularjs file upload in put method not working

我有一個簡單的待辦事項應用程序,我試圖上傳一張照片和一個待辦事項。 現在我已經創建了這個工廠函數來處理todo的創建

  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'));

這表明注釋已在請求中發布。 如果我在updateTodo工廠方法中將put更改為post,它將開始工作。 我錯過了一些額外的標題或什么?

更新

如果我從updateTodo方法中刪除transformRequestheaders ,則在服務器上成功接收文本數據,但文件數據沒有。
如果我只是刪除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.phphttp://php.net/manual/en/function.parse-str .php但是它們都沒有正常工作,也沒有給出像$ _GET或$ _POST這樣的數組。

PHP文檔中的這篇文章討論了PUT方法和文件上傳(multipart / form-data)。

我不能引用它的任何部分因為我認為一切都很重要。 您應該詳細閱讀它,但總結一下,如果不更改Apache配置和創建輔助腳本,這是不可能的。

使用Laravel,您應該使用Form Method Spoofing (基本上是一個名為_method的變量)並繼續使用POST。 _method將允許您正確調用Laravel的PUT操作。


編輯

默認情況下,AngularJS以JSON格式發送數據,這解釋了為什么您無法使用$_POST全局訪問數據。 我在另一個問題中回答了這個問題 ,這個問題解釋了你要做什么。

我認為您必須在服務器端序列化文件,如果您發送文件然后附加自定義標頭並在服務器端適當處理該標頭請求。

事先創建formData - >你不需要變換器。
transformRequest : angular.identity添加到HTTP標頭中。 您的代碼應類似於以下代碼段:

$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
});

角度身份只不過是吐出你的表單數據: https//docs.angularjs.org/api/ng/function/angular.identity

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM