2017-03-02 120 views
1

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

这是我的HTML initiatior:

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

我的角应用程序运行在9000端口和laravel在默认端口。 来自angular的请求触及laravel中构建的api,但事实是它缺少该文件。尽管我的请求标题在浏览器的网络中看起来很可疑。像内容类型的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文件(不是在我的角度项目)的文件中有代码没有问题的是特别是我创建了测试文件上传,它正在运行。

,当我试图通过我的项目上载它的失败。 我重视我的控制台一个案件的图像正在一个(通过随机文件上传图像)等为不工作的情况下(我在哪里上传文件通过我的项目)。

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

+0

变化print_r的添加删除头在所有其他请求'$回报和data'检查您的控制台查看。网络选项卡。看看返回的是什么 – EddyTheDove

+0

它向我展示了同样的东西。没什么。虽然请求很好。 – Dherya

+0

你的意思是“请求很好”。如果你可以访问请求,然后使用请求来获取文件,如$ request-> file('file');' – EddyTheDove

回答

0

拦截

是的,因为我们在拦截

设置头和默认标头,我们在拦截

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

为每个请求都设置他们创造了文件上传问题从我们的角度应用程序制作的内容正在通过拦截器,拦截器正在使用这些标题修改每个请求。所以我必须从拦截器中删除这个头。

注意

不要忘记