在 angularjs 和 laravel 中上传文件

Question

我正在使用 ngf-file-upload 模块通过 angularjs 和 laravel.

上传文件

这是我的 html 发起人 :

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

这是我在 angular

中的控制器

      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，但问题是它缺少文件。尽管我的请求 header 在浏览器网络中看起来很可疑。就像 content-type 不是 multipart/form-data

This is the link of danial farid js fiddle

我使用的是相同的代码，但在 fiddle.

中提到了与我的 api 同步的更改

奇怪的是，当我将我的 local API 路径提供给这个 fiddle 然后它工作正常。但它不适用于我的本地项目。我认为我 angular 方面缺少一些东西。

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 项目中有些东西在我的上传过程中造成了障碍。

Answer 1

拦截器

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

和我们在拦截器中设置的默认headers

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

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

备注

Don't forget to add the removed header in every other request

在 angularjs 和 laravel 中上传文件

File upload in angularjs and laravel

angularjs

laravel

file-upload

ng-file-upload