2017-09-04 176 views
8

我真的不知道問題出在哪裏,說實話。Dropzone在後端Laravel中沒有有效的MIME類型?

可能是Dropzone,Laravel(5.4),...所以我真的希望即使是一個想法也許能幫助我克服這個問題。

當我上傳文件,我沒有得到任何的js問題,但Laravel拋出我下面的錯誤(每個文件):

調用未定義的方法的Symfony \分量\ HttpFoundation \文件\ UploadedFile的::店( )

這是我的後端代碼(錯誤被設置在portfolioStore法):

<?php 

namespace App\Http\Controllers; 

use App\Http\Requests\UploadPortfolioPhotoRequest; use App\PortfolioPhoto; use DebugBar\DebugBar; use Illuminate\Http\Request; use Illuminate\Support\Facades\Storage; 

class AdminController extends Controller { 
    /** 
    * Create a new controller instance. 
    * 
    * @return void 
    */ 
    public function __construct() 
    { 
     $this->middleware('auth'); 
    } 

    /** 
    * Show the application dashboard. 
    * 
    * @return \Illuminate\Http\Response 
    */ 
    public function index() 
    { 
     return view('admin.home'); 
    } 

    public function portfolioIndex() 
    { 
     $photos = PortfolioPhoto::all(); 

     return view ('admin.portfolio.index')->with('photos', $photos); 
    } 

    public function portfolioStore(UploadPortfolioPhotoRequest $request) 
    { 
     foreach ($request->files as $photo) { 
      $filename = $photo->store('photos'); 

      $test = PortfolioPhoto::create([ 
       'filename' => $filename, 
       'title' => 'title', 
       'alt' => 'alt' 
      ]); 
     } 

     return 'Upload successful!'; 
    } 

    public function portfolioDelete() 
    { 
     return view ('admin.portfolio.index'); 
    } } 

在任何情況下,這是我的懸浮窗的配置:

var previewNode = document.querySelector("#template"); 
previewNode.id = ""; 
var previewTemplate = previewNode.parentNode.innerHTML; 
previewNode.parentNode.removeChild(previewNode); 

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone 
    url: "/admin/portfolio", // Set the url 
    thumbnailWidth: 80, 
    thumbnailHeight: 80, 
    parallelUploads: 20, 
    previewTemplate: previewTemplate, 
    autoDiscover: false, 
    autoQueue: false, // Make sure the files aren't queued until manually added 
    previewsContainer: "#previews", // Define the container to display the previews 
    clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files. 
    headers: { 
     'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value, 
    } 
}); 

myDropzone.on("addedfile", function(file) { 
    // Hookup the start button 
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); }; 
}); 

myDropzone.on("sending", function(file) { 
    // And disable the start button 
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); 
}); 

// Hide the total progress bar when nothing's uploading anymore 
myDropzone.on("queuecomplete", function(progress) { 
    var alertMsg = document.createElement('div'), 
     actions = document.getElementById('actions'); 
    alertMsg.setAttribute('class', 'alert bg-success'); 
    alertMsg.innerHTML = 'Files successfully uploaded<a href="#" class="pull-right"><em class="fa fa-lg fa-close"></em></a>'; 
    actions.parentNode.insertBefore(alertMsg, actions.nextSibling); 
}); 

// Setup the buttons for all transfers 
// The "add files" button doesn't need to be setup because the config 
// `clickable` has already been specified. 
document.querySelector("#actions .start").onclick = function() { 
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); 
}; 
document.querySelector("#actions .cancel").onclick = function() { 
    myDropzone.removeAllFiles(true); 
}; 

這裏是視圖:

@extends('admin.layouts.app') 

@section('content') 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Upload images</div> 

       <div class="panel-body"> 
        @if (count($errors) > 0) 
         <div class="row"> 
          <div class="col-xs-12"> 
           <div class="alert bg-danger" role="alert"><em class="fa fa-lg fa-warning">&nbsp;</em> 
            <ul style="display: inline-block;"> 
             @foreach ($errors->all() as $error) 
              <li>{{ $error }}</li> 
             @endforeach 
            </ul> 
            <a href="#" class="pull-right"><em class="fa fa-lg fa-close"></em></a> 
           </div> 
          </div> 
         </div> 
        @endif 

        <div id="actions" class="row"> 
         <div class="col-xs-12"> 
          <div class="form-group"> 
           <button class="btn btn-success fileinput-button"> 
            <i class="glyphicon glyphicon-plus"></i><span>Add files...</span> 
           </button> 
           <button type="submit" class="btn btn-primary start"> 
            <i class="glyphicon glyphicon-upload"></i> <span>Start upload</span> 
           </button> 
           <button type="reset" class="btn btn-warning cancel"> 
            <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel upload</span> 
           </button> 
          </div> 
         </div> 
        </div> 

        <div class="row"> 
         <div class="col-xs-12"> 
          <div class="files" id="previews"> 
           <div id="template" class="file-row"> 
            <div class="media"> 
             <div class="media-left"> 
              <img data-dz-thumbnail/> 
             </div> 
             <div class="media-body"> 
              <h4 class="media-heading name" data-dz-name></h4> 
              <div class="col-xs-12"><strong class="error text-danger" data-dz-errormessage></strong></div> 
              <div class="col-xs-12"> 
               <div class="col-sm-3"> 
                <p class="size" data-dz-size></p> 
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
                 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 
                </div> 
               </div> 
               <div class="col-sm-9 text-right"> 
                <button class="btn btn-primary start"> 
                 <i class="glyphicon glyphicon-upload"></i> 
                 <span>Start</span> 
                </button> 
                <button data-dz-remove class="btn btn-warning cancel"> 
                 <i class="glyphicon glyphicon-ban-circle"></i> 
                 <span>Cancel</span> 
                </button> 
                <button data-dz-remove class="btn btn-danger delete"> 
                 <i class="glyphicon glyphicon-trash"></i> 
                 <span>Delete</span> 
                </button> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Portfolio</div> 

       <div class="panel-body"> 
        <div class="row"> 
         @foreach($photos as $photo) 
          <div class="col-xs-6 col-md-3"> 
           <a href="#" class="thumbnail"> 
            <img src="..." alt="..."> 
           </a> 
          </div> 
         @endforeach 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>@endsection 

@push('styles') 
<link href="{{asset('css/vendor/dropzone.css')}}"/> 
@endpush 

@push('scripts') 
<script src="{{asset('js/vendor/dropzone.js')}}"></script> 
<script src="{{asset('js/vendor/initialize/dropzone.cfg.js')}}"></script> 
@endpush 

所以現在我想知道這個問題是否與一個MIME類型爲不確定造成的存儲方法到不行。或者我應該尋找其他地方?

任何意見,想法表示歡迎:)

+0

可以顯示其中放置區被初始化 –

+0

@AatishSai嘿您的回覆感謝HTML表單,我加入了以我的職務。 – Goowik

+0

如果你是'dd($ photo);'在foreach中,它是否返回一個對象? – mbozwood

回答

2

這裏的問題是在Laravel代碼庫中不存在$request->files。由於Illuminate\Http\Request類擴展了Symfony\Component\HttpFoundation\Request類,filesrefers toSymfony\Component\HttpFoundation\FileBag類,它確實包含許多沒有存儲方法的Symfony\Component\HttpFoundation\File\UploadedFile

簡單的解決方法: 更換$request->files$request->allFiles()這應該給你,因爲他們店裏方法

隨意拍在評論部分有任何疑問Illuminate\Http\UploadedFile類的數組,如果你需要進一步的幫助

2

這似乎沒有dropzone.js的問題給我。 錯誤在後端(laravel)中顯示「未定義的方法...」,因此該方法不適用於您的對象photo

查看laravel中的文檔。 (https://laravel.com/docs/5.4/filesystem#file-uploads

也許你可以嘗試這樣的事:

foreach ($request->files as $photo) { 
    $path = Storage::putFile('photos', $photo); 
... 
+0

我想也使用這個:但是然後我得到:調用未定義的方法Symfony \ Component \ HttpFoundation \ File \ UploadedFile :: hashName()... – Goowik

+0

您能否提供您的後端類的完整代碼? –

+0

我已經用全班替換了後端功能。 我沒有包含請求通過。 – Goowik

1

修訂

在Laravel訪問上傳的文件using the file method,這需要輸入的文件作爲參數的名稱。而從the Dropzonejs docs

上傳的文件可以只處理好像有本來是一個HTML輸入這樣的: <input type="file" name="file" />

那麼試試這個:

foreach ($request->file('file') as $photo) { 
+0

這顯示爲一個無效參數(爲foreach()提供)。 – Goowik

+0

你的文件輸入是什麼樣的? –

+0

它沒有直接的文件輸入。所有這些都是通過Dropzone配置完成的。 – Goowik

2

我有一個類似的問題,但在我的情況下,它只是沒有enctype="multipart/form-data"財產包括在<form>標籤。一旦我做到了,它的工作。而且我看到你也沒有<form>標籤。

<form action="/route" method="post" enctype="multipart/form-data"> 
    <!-- your code for dropzone goes here --> 
</form> 

而且在一個側面說明,在你portfolioStore()方法在你AdminController控制器,你有,

foreach ($request->allFiles() as $photo) { 
    $filename = $photo->store('photos'); 

    $test = PortfolioPhoto::create([ 
     'filename' => $filename, 
     'title' => 'title', 
     'alt' => 'alt' 
    ]); 
} 

請不要這麼做!

您在這裏創建了太多的插入查詢。

重構它如下。你可以逃脫1分貝查詢:)

$photos = []; 
foreach ($request->files as $photo) { 
    $filename = $photo->store('photos'); 

    $photos[] = [ 
     'filename' => $filename, 
     'title' => 'title', 
     'alt' => 'alt' 
    ]; 
} 
PortfolioPhoto::createMany($photos); 

而且也是一前一後我回答如何convieninetly在Laravel存儲文件。你可以check it out here。它可以改進您的$filename = $photo->store('photos');部分。

希望這會幫助你:)

+0

這不會工作。 $ request-> files返回沒有'store'方法的'Symfony \ Component \ HttpFoundation \ FileBag'。用'$ request-> allFiles()'替換'$ request-> files' – Paras