Laravel 8中如何通过Ajax请求提交排序后多图数据并存入数据库

1. 前端代码修改 #

原有逻辑中单独发送AJAX传递排序后图片数据的方式会和表单提交分离，需要调整为将排序后的图片数据随表单一起提交，同时避免GET请求长度不足无法承载base64内容的问题：

• 首先在提交表单中新增隐藏域，用来存储排序后的图片JSON数据：

<input type="hidden" name="sorted_images" id="sorted_images">

• 修改原有JS逻辑，取消单独的AJAX请求，在表单提交前将排序后的图片数组赋值到隐藏域：

$(document).ready(function() { 
    // 初始化排序
    $("#sortable").sortable();

    // 监听表单提交事件
    $('form#product_form').submit(function(e) {
        var imageids_arr = [];
        // 获取排序后的图片ID和base64地址
        $('#sortable li').each(function() {
            imageids_arr.push({
                id : $(this).data('id'),
                src : $(this).data('src')
            });
        });
        // 将数组转为JSON字符串存入隐藏域
        $('#sorted_images').val(JSON.stringify(imageids_arr));
    });
});

注意：请将form#product_form替换为你实际的表单选择器，表单提交方式需设置为POST，并添加Laravel CSRF标记@csrf

2. 后端代码修改 #

2.1 新增base64图片处理方法 #

原有product_images方法仅支持处理上传的文件对象，需要新增适配base64格式的存储方法：

public function sorted_base64_images($base64_images, $folder_name) {
    $end_url = "";
    $count = 0;
    // 按前端传的顺序处理，保证排序生效
    foreach(json_decode($base64_images, true) as $image_item) {
        $base64_src = $image_item['src'];
        // 剥离base64前缀
        $base64_str = substr($base64_src, strpos($base64_src, ',') + 1);
        $image_data = base64_decode($base64_str);
        // 提取图片扩展名
        $ext = explode('/', mime_content_type($base64_src))[1];
        $ref_image_id = 'PUBR'.time().$count++.'.'.$ext;
        // 存储到指定磁盘
        $storage_path = $folder_name.'/'.$ref_image_id;
        \Storage::disk('my_uploaded_files')->put($storage_path, $image_data);
        $end_url .= $storage_path.',';
    }
    return rtrim($end_url, ',');
}

2.2 调整控制器add_product方法 #

• 首先修改验证规则，将原有product_images的验证替换为sorted_images验证：

$rules = array(
    'name' => 'required',
    'author' => 'required',
    'short_description' => 'required',
    'description' => 'required',
    'parent_id' => 'required',
    'tags' => 'required',
    'price' => 'required',
    'sku' => 'required',
    'publisher' => 'required',
    'thumbnail' => 'required',
    'sorted_images' => 'required', // 替换原有的product_images验证
);

• 替换原有图片处理逻辑，调用新增的base64处理方法：

// 注释原有上传文件处理逻辑
// $product_images = $this->product_images($request->file('product_images'), $product_id);
// 改用排序后的base64图片处理
$product_images = $this->sorted_base64_images($request->input('sorted_images'), $product_id);

注意事项 #

• 需确保config/filesystems.php中你配置的my_uploaded_files磁盘路径有可写权限
• 前端排序后的数组顺序就是最终图片存储路径拼接的顺序，可直接对应展示时的排序需求
• 若base64内容过大，可适当调整php.ini中的post_max_size和upload_max_filesize配置

内容的提问来源于stack exchange，提问作者Pooja