Laravel 5.5多图像上传

Question

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

这是我所拥有的：

资料库

1. 产品（我的产品（包括信息）将保存在其中）
2. 图片（我的图片（包括产品ID）将保存提供的屏幕截图 ）

楷模

产品：

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

图像控制器

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>

任何想法？

Answer 1

控制器代码：

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()}}

尝试这种希望可以帮助您前进。 这是使此事情起作用的多种方法之一。

Answer 2

这是一个形态关系，这就是你得到形态关系的方式

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

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

在这里阅读有关多态关系

Answer 3

我通常要做的是

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