在 angularjs 和 laravel 中上传文件答案

【问题标题】：File upload in angularjs and laravel在 angularjs 和 laravel 中上传文件
【发布时间】：2017-07-21 19:40:16
【问题描述】：

我正在使用 ngf-file-upload 模块通过 angularjs 和 laravel 上传文件。

这是我的 html 发起人：

<div class="button" ngf-select="profile.uploadFiles($file, $invalidFiles)">Upload on file select</div>

这是我的角度控制器

      vm.uploadFiles = function(file) {
            if (file) {
                file.upload = Upload.upload({
                    url: 'http://localhost/api/uploadImg',
                    data: {file: file}
                });
            }
      }

这是我在 Laravel 中的上传 API 代码。

public function uploadImg()
{
    $data = Input::file('file');
    return $data;
}

我的 Angular 应用程序在 9000 端口上运行，而 laravel 在默认端口上运行。来自 Angular 的请求正在访问 laravel 中内置的 api，但问题是它缺少文件。尽管我的请求标头在浏览器的网络中看起来很可疑。像 content-type 不是 multipart/form-data

This is the link of danial farid js fiddle

我正在使用相同的代码，并进行了更改以与我的 api 同步，这在小提琴中提到。

奇怪的是，当我将我的 本地 API 路径提供给这个小提琴时，它工作正常。但它不适用于我在本地的项目。我认为我的角度方面缺少一些东西。

This is the image of param that is send when i am trying to upload file from local project

This is the image of param that is send when i am trying to upload file from fiddle to my api

我的结论

代码没有问题，因为我能够从一个 html 文件（不在我的 Angular 项目中）上传文件，该文件是我专门为测试文件上传而创建的，并且它正在运行。

但是

当我尝试通过我的项目上传时失败。我附上了 我的控制台的图像，一个案例正在工作（通过随机文件上传图像），另一个是 不工作案例（我正在 通过我的项目）。

我不知道下一步该做什么。我认为我的 Angular 项目中有一些东西在我的上传过程中造成了障碍。

【问题讨论】：

将 print_r 更改为 return $data 并检查您的控制台以查看。网络选项卡。看看返回了什么
它向我展示了同样的东西。没什么。虽然请求很好。
“请求没问题”是什么意思。如果您可以访问请求，则使用请求获取文件，如$request->file('file');
我已经用过那个了。请求很好，这意味着我可以从 angular 请求到 laravel，但文件丢失了。
转到控制台中的网络选项卡，然后转到“标题”并滚动到它的底部并检查查询字符串参数。它会告诉你你是否真的发送了文件。

标签： angularjs laravel file-upload ng-file-upload

【解决方案1】：

拦截器

是的，他们在文件上传中造成了问题，因为我们在拦截器中设置了标题

以及我们在拦截器中设置的默认标头

  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

对于从我们的 Angular 应用程序发出的每个请求都通过拦截器，并且拦截器正在使用这些标头修改每个请求。所以我必须从拦截器中删除这个标头。

注意

不要忘记在每个其他请求中添加已删除的标头

【讨论】：