如何使用Angular File Upload(ng-file-upload)将图片上传到后端Laravel / PHP

时间:2015-08-28 13:00:16

标签: javascript php angularjs ng-file-upload

我一直试图绕过ng-file-upload但没有太大的成功。

我正在尝试使用 ng-file-upload 上传图片到后端PHP / Laravel

我在角度控制器中有这个:

$scope.upload = function (file) {

    Upload.upload({
        method: 'POST',
        url: '/profile/photo/add',
        file: file,
        sendFieldsAs: 'form'
        //fileFormDataName: 'photo'
    })

    .success(function (data, status, headers, config) {
          dd(data);
          console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     })

    .error(function (data, status, headers, config) {
          dd(data);
          console.log('error status: ' + status);
     })

用于ng文件上传的HTML模板:

<div ngf-select="upload($file, $event)"
  ngf-change="upload($file, $event)"
  ngf-pattern="'image/*'"
  ngf-capture="capture"
  ngf-drag-over-class="{accept:'dragover', reject:'dragover-err',      delay:100}"
  ngf-validate="{size: {min: 10, max: '1MB'}, width: {min: 200, max:10000},  height: {min: 200, max: 300}, duration: {min: '10s', max: '5m'}, pattern: 'image/*'}"
  ngf-keep="false"
  ngf-allow-dir="true" class="drop-box"
  ngf-drop-available="dropAvailable">Select Photo,
  <span ng-show="dropAvailable">Drop/Paste Photo</span>

我还在Laravel中创建了一个路由/控制器

public function postAdd(PhotoRequest $request)
{
    //Here am just checking if file is valid but it always return false and uploads an unreadable file to /uploads/profile folder 
    if ($request->file('file')->isValid() && $request->hasFile('file')) {
        $request->file('file')->move(public_path('/uploads/profile/'));
        return json_encode($request->file('file')->isValid()); //returns false
    }else{
        return response()->json(['file not found']);
    }

 }

在Chrome控制台中检查时,输出如下所示: enter image description here

上传了这些无法读取的文件

enter image description here

我做错了什么?

0 个答案:

没有答案