为电商产品添加不同类型图片：Laravel 实现方案

聖光之護

发布时间：2025-08-20 17:58:01

304人浏览过

来源于php中文网

原创

为电商产品添加不同类型图片：laravel 实现方案

本文针对电商网站中为不同产品类型添加特定图片的需求，提供了一种基于 Laravel 的解决方案。通过将产品和图片信息分开处理，并引入 image-picker jQuery 插件，实现了灵活的产品图片管理。文章将详细介绍产品创建和图片关联的实现步骤，并提供相应的代码示例，帮助开发者构建更完善的电商平台。

在构建电商平台时，经常需要为同一产品的不同类型（例如颜色、尺寸）展示不同的图片。直接在产品创建时绑定所有图片可能会变得复杂且难以维护。本文介绍一种更灵活的方法，将产品创建和图片关联分开处理，并利用 jQuery 插件 image-picker 简化图片选择过程。

方案概述

该方案的核心思想是：

先创建产品和上传产品图片： 在产品创建过程中，先保存产品的基本信息和上传的产品图片，将图片信息存储在 product_images 表中。
将产品重定向到图片选择页面： 产品创建成功后，将用户重定向到一个专门用于选择产品类型图片的页面。
使用 image-picker 插件选择图片： 在该页面，使用 image-picker 插件展示已上传的图片，并允许用户为每个产品类型选择对应的图片。
保存图片关联信息： 将产品类型和所选图片 ID 的关联关系保存到 product_variations 表的 product_variation_image 字段中。

代码实现

以下是关键代码片段，展示了如何在 Laravel 中实现该方案：

1. 产品存储方法 (ProductController.php):

public function product_store(Request $request)
{
    // ... (产品类型变量、封面图片处理等)

    if(!empty(implode($productTypes))) {
        $productId = Products::insertGetId([
            'category_id' => $request->category_id,
            'sub_category_id' => $request->sub_category_id,
            'sub_sub_category_id' => $request->sub_sub_category_id,
            'product_name' => $request->product_name,
            'product_link' => strtolower(str_replace(' ','-', $request->product_name)),
            'product_desc' => $request->product_desc,
            'product_short_desc' => $request->product_short_desc,
            'product_price' => $request->product_price,
            'product_discount' => $request->product_discount,
            'product_cover_image' => $productCoverImageLink,
            'new_product' => $request->new_product,
            'featured' => $request->featured,
            'special_offer' => $request->special_offer,
            'status' => $request->status,
        ]);

        foreach ($productTypes as $id => $key) {
            ProductVariations::insert([
                'product_id' => $productId,
                'product_type' => $productTypes[$id],
                'product_color' => $productColors[$id],
                'product_weight' => $productWeight[$id],
                'product_variation_qty' => $productQtys[$id],
                'product_variation_price' => $productPrices[$id],
                'created_at' => Carbon::now()
            ]);
        }
    } else {
        // ... (无产品类型时的处理)
    }

    // PRODUCT MULTIPLE IMAGES //
    $productImages = $request->file('product_image');
    if($productImages) {
        foreach ($productImages as $productImage) {
            $productImagesNewName = hexdec(uniqid()) . '.' . $productImage->getClientOriginalExtension();
            Image::make($productImage)->resize(917, 1000)->save('upload/products/product-images/' . $productImagesNewName);
            $productImagesLink = 'upload/products/product-images/' . $productImagesNewName;
            ProductImages::insert([
                'product_id' => $productId,
                'product_image' => $productImagesLink,
                'created_at' => Carbon::now()
            ]);
        }
    }
    // PRODUCT MULTIPLE IMAGES ENDS //

    $notification = [
        'message' => 'Product Inserted!',
        'alert-type' => 'success'
    ];

    if(!empty(implode($productTypes))) {
        return redirect()->route('admin.product-variations-images-settings', ['id' => $productId])->with($notification);
    } else {
        return redirect()->route('admin.products')->with($notification);
    }
}

关键点：

Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

下载

产品创建成功后，根据是否存在产品类型，将用户重定向到不同的页面。如果存在产品类型，则重定向到 admin.product-variations-images-settings 路由，并传递产品 ID。

2. 产品类型图片设置页面 (ProductController.php):

public function product_variations_images_settings($id)
{
    $productVariations = ProductVariations::where('product_id', $id)->get();
    $productImages = ProductImages::where('product_id', $id)->get();
    return view('administrator.pages.products.product-variations', compact('productVariations','productImages'));
}

关键点：

该方法获取指定产品 ID 的所有产品类型和图片，并将它们传递给 product-variations 视图。

3. 图片选择和保存方法 (ProductController.php):

public function product_variations_images_store(Request $request)
{
    $productVariationId = $request->id;
    $productImageId = $request->product_variation_image;
    $array = array_combine($productVariationId, $productImageId);

    foreach ($array as $id => $key){
        ProductVariations::findOrFail($id)->update([
            'product_variation_image' => $key,
            'updated_at' => Carbon::now()
        ]);
    }

    $notification = [
        'message' => 'Images Set!',
        'alert-type' => 'success'
    ];

    return redirect()->route('admin.products')->with($notification);
}

关键点：