Laravel 5.5多图像上传

时间:2018-01-04 05:07:06

标签: php laravel dropzone

我尝试使用dropzoneJS为我的产品上传多个图像,到目前为止,我可以将图像保存在数据库中,也可以保存在图像文件夹中,但是我在获取产品ID以将每个图像与产品相关联方面存在问题。

  

这就是我所拥有的:

数据库

  1. 产品(我的产品包括信息将保存)
  2. 图片(我的图片包含产品ID将保存截图提供
  3. images db

    模型

    产品:

    public function images()
      {
        return $this->morphMany(Image::class, 'imageable');
      }
    

    图片:

    class Image extends Model
    {
      protected $fillable = ['name'];
    
    
      public function imageable()
      {
          return $this->morphTo();
      }
    
      public function product()
      {
      return $this->belongsTo(Product::class);
      }
    }
    

    图像架构

    public function up()
        {
            Schema::create('images', function (Blueprint $table) {
                $table->increments('id');
                $table->integer('imageable_id')->nullable();
                $table->string('imageable_type')->nullable();
                $table->string('name');
                $table->timestamps();
            });
        }
    

    ImageController

    class ImageController extends Controller
    {
      public function dropzone()
      {
        return view('dropzone-view');
      }
    
      public function dropzoneStore(Request $request)
      {
        // works
        $file = $request->file('file');
        $filename = 'product' . '-' . time() . '.' . $file->getClientOriginalExtension();
        $filePath = public_path('images/');
        $request->file('file')->move($filePath, $filename);
    
        return Image::create([
          'name' => $filename,
          'imageable_id' => $request->input('imageable_id'),
        ])->id;
    
      }
    
    }
    

    产品创建(刀片)

    // Form
    {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone mt-20', 'id' => 'my-awesome-dropzone' ]) !!}
     <div class="fallback">
       <input name="file" type="file" multiple />
     </div>
     <input type="hidden" name="imageIds[]" value="">
    {{Form::close()}}
    
    // Javascript
    <script type="text/javascript">
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("form#my-awesome-dropzone", {
      headers: {
        "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
      },
      acceptedFiles: ".jpeg,.jpg,.png,.gif",
      dictDefaultMessage: "Drag an image here to upload, or click to select one",
      maxFiles: 15, // Maximum Number of Files
      maxFilesize: 8, // MB
      addRemoveLinks: true,
    });
    
    myDropzone.on("success", function (response) {console.log(response.xhr.response); });
    
    </script>
    

    有什么想法吗?

3 个答案:

答案 0 :(得分:0)

控制器代码:

class ImageController extends Controller
{
  public function dropzone($id)
  {
$product = Product::find($id);
return view('dropzone-view')
      ->withProduct($porduct);
}
  public function dropzoneStore(Request $request)
  {
// works
$file = $request->file('file');
$filename = 'product' . '-' . time() . '.' . $file->getClientOriginalExtension();
$filePath = public_path('images/');
$request->file('file')->move($filePath, $filename);

return Image::create([
  'name' => $filename,
  'imageable_id' => $request->input('imageable_id'),
])->id;
  }
}

刀片视图代码:

{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone mt-20', 'id' => 'my-awesome-dropzone' ]) !!}
 <div class="fallback">
  <input name="imageable_id" type="hidden" value="{{$product->id}}" />
<input name="file" type="file" multiple />
 </div>
{{Form::close()}}

试试这个希望,这应该让你去。这是使这件事发挥作用的众多方法之一。

答案 1 :(得分:0)

这是一种形态关系,这就是你如何获得形态关系

$post = App\Post::find(1);

foreach ($post->comments as $comment) {
    //
}

在此处阅读polymorphic-relations

答案 2 :(得分:0)

我通常做的是,

  1. 上传图片后,返回新创建的图片的ID(您已在ImageController中执行此操作)
  2. 在您的产品页面上,在dropzone“success”回调中,您可以读取图像ID并将其添加到隐藏数组输入字段
  3. 在您的控制器中,您必须创建新产品,然后在保存之后,您可以将图像附加到正确的产品,因为现在您已经拥有了图像的ID +产品实例。