如何使用CORS上传带有角度的文件

问题描述 投票：3回答：2

我正在使用角度为1.6的restangular 1.51。我的HTML看起来像这样

<input type="file" name="file" />

和角度代码（基于讨论here）：

let directive = {
  ..
  link: (scope, element, attrs) => {
        let inputElement = angular.element(element[0].querySelector('input'));
        inputElement.bind('change', function () {
        var formData = new FormData();
        formData.append('file', inputElement[0].files[0]);

        API.all('stores/csv').withHttpConfig({transformRequest: angular.identity})             .customPOST(formData,'' , undefined,
          { 'Content-Type': undefined }).then((response) => {console.log(response);
          });
    });

laravel代码：

public function upload(Request $request)
{

    $this->validate($request, [
        'file' => 'required',
        'type'  => 'in:csv,xls,xlsx',
        ]);

    $file = $request->file('file');
    var_dump($file);
    return response()->success(['file' => $file]);
}

事情是这里的$ file在laravel转储中显示为一个空数组。文档相当糟糕。想法？

update

它使用邮差很好。这是邮递员产生的卷曲：

邮差卷曲：

curl -X POST \
  http://127.0.0.1:8000/api/stores/csv \
  -H 'Accept: application/x.toters.v1+json' \
  -H 'Authorization: Bearer ***' \
  -H 'Cache-Control: no-cache' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Postman-Token: 4f9d2f3b-551b-aa47-4f65-98c7582f2919' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F file=@/Users/Shared/Download/bac-383-store-update.csv

邮差服务器日志

[2018-03-03 06:35:18] local.INFO: ----------------------------- [] []
[2018-03-03 06:35:18] local.INFO: POST api/stores/csv [] []
[2018-03-03 06:35:18] local.INFO: array (   'file' =>    Illuminate\Http\UploadedFile::__set_state(array(      'test' => false,      'originalName' => 'bac-383-store-update.csv',      'mimeType' => 'text/csv',      'size' => 62,      'error' => 0,   )), ) [] []
[2018-03-03 06:35:18] local.INFO: Status code: 200 [] []
[2018-03-03 06:35:18] local.INFO: User id: 104 [] []

这是由restangular产生的卷曲

restangular（两个请求 - 使用chrome）卷曲：

curl 'http://127.0.0.1:8000/api/stores/csv' 
-X OPTIONS 
-H 'Access-Control-Request-Method: POST' 
-H 'Origin: http://localhost:3000' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: en-US,en;q=0.9' 
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36' 
-H 'Accept: */*' 
-H 'Connection: keep-alive' 
-H 'Access-Control-Request-Headers: authorization,content-type' 
--compressed


curl 'http://127.0.0.1:8000/api/stores/csv' 
-H 'Origin: http://localhost:3000' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: en-US,en;q=0.9' 
-H 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEwNCwiaXNzIjoiaHR0cDpcL1wvMTkyLjE2OC4wLjIzMjo4MDAwXC9hcGlcL3VzZXJzXC9sb2dpbiIsImlhdCI6MTUxOTk2OTAzNiwiZXhwIjoxNjE0NTc3MDM2LCJuYmYiOjE1MTk5NjkwMzYsImp0aSI6IndHV0UzRjhYQ3hRdDBGOWMifQ.XqySEIprbxtAU-RfhOgtFkScN1nUuuXEwMxCltfjqu8' 
-H 'Content-Type: application/json' 
-H 'Accept: application/x.toters.v1+json' 
-H 'Referer: http://localhost:3000/?local/' 
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36' 
-H 'Connection: keep-alive' 
--data-binary $'------WebKitFormBoundary9ApCHw2ykmLYK2IY\r\nContent-Disposition: form-data; name="file"; filename="bac-383-store-update.csv"\r\nContent-Type: text/csv\r\n\r\n\r\n------WebKitFormBoundary9ApCHw2ykmLYK2IY--\r\n' --compressed

restangular / chrome服务器日志

[2018-03-03 06:34:52] local.INFO: ----------------------------- [] []
[2018-03-03 06:34:52] local.INFO: OPTIONS api/stores/csv [] []
[2018-03-03 06:34:52] local.INFO: array ( ) [] []
[2018-03-03 06:34:52] local.INFO: Status code: 200 [] []
[2018-03-03 06:34:52] local.INFO: ----------------------------- [] []
[2018-03-03 06:34:52] local.INFO: POST api/stores/csv [] []
[2018-03-03 06:34:52] local.INFO: array ( ) [] []
[2018-03-03 06:34:52] local.INFO: Status code: 200 [] []
[2018-03-03 06:34:52] local.INFO: User id: 104 [] []

update 2:

在比较两个卷发之间的标题后，我注意到内容类型不同：

邮差卷曲片段

-H 'Content-Type: application/x-www-form-urlencoded' \

重启curl片段

-H 'Content-Type: application/json'

这是令人震惊的，考虑到矩形人PROMISED通过使用上面的语法，内容类型应该是application/x-www-form-urlencoded：

Restangular.all（'users'）。withHttpConfig（{transformRequest：angular.identity}）。customPOST（formData，undefined，undefined，{'Content-Type'：undefined}）;这基本上告诉请求使用Content-Type：multipart / form-data作为标题。

所以我写了这个：

    API.all('stores/csv').withHttpConfig({transformRequest: angular.identity})
    .customPOST(formData, undefined, undefined,
      { 'Content-Type': 'application/x-www-form-urlencoded' }).then((response) => {console.log(response);

这改善了一点......现在比较两个卷发：

邮差

curl -X POST \
  http://127.0.0.1:8000/api/stores/csv \
  -H 'Accept: application/x.toters.v1+json' \
  -H 'Authorization: Bearer ***' \
  -H 'Cache-Control: no-cache' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Postman-Token: 4f9d2f3b-551b-aa47-4f65-98c7582f2919' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F file=@/Users/Shared/Download/bac-383-store-update.csv

角

  curl 'http://127.0.0.1:8000/api/stores/csv' 
  -H 'Origin: http://localhost:3000' 
  -H 'Accept-Encoding: gzip, deflate, br' 
  -H 'Accept-Language: en-US,en;q=0.9' 
  -H 'Authorization: Bearer ***
  -H 'Content-Type: application/x-www-form-urlencoded' 
  -H 'Accept: application/x.toters.v1+json' 
  -H 'Referer: http://localhost:3000/?local/' 
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36' 
  -H 'Connection: keep-alive' 
  --data $'------WebKitFormBoundaryd405EnTxpFJv2GDN\r\nContent-Disposition: form-data; name="file"; filename="bac-383-store-update.csv"\r\nContent-Type: text/csv\r\n\r\n\r\n------WebKitFormBoundaryd405EnTxpFJv2GDN\r\nContent-Disposition: form-data; name="name"\r\n\r\nfile\r\n------WebKitFormBoundaryd405EnTxpFJv2GDN--\r\n' 
  --compressed

所以我仍然没有发送-F option

angularjs laravel laravel-5 restangular angular1.6
2个回答
3
投票

我之前没有涉及restangular，但是在Laravel中，当你想从请求中获取一个文件时，你需要在请求对象上使用file方法：

$file = $request->file('file');

这应该给你一个Illuminate\Http\UploadedFile的例子

1
投票

我没有深入研究restangular，但在HTTP级别，我相信你希望你的Content-Type标题是multipart/form-data，而不是application/x-www-form-urlencoded。

如果您对这种差异感到好奇，请查看this answer。 由于您要发送文件，multipart/form-data就是您想要的。

我知道你看到邮递员：

-H 'Content-Type: application/x-www-form-urlencoded'

但只有几行，它确实：

-H 'content-type: multipart/form-data; boundary...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.