使用 Laravel 使用 dropzone.js 上传多个图像

Question

我正在使用带有 laravel 的 dropzone 来上传多张图片，它可以正常工作。我要的是我想立即上传它们，然后向我的客户发送电子邮件，向他展示照片已上传。

提前致谢。

<form action="{{route('upload.photos')}}" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneFileUpload" >
                    {{csrf_field()}}
                    <div>
                        <h3 class="text-center">Upload Multiple Image By Click On Box</h3>
                    </div>
                    <div class="fallback"> 
                        <input name="file" type="file" multiple />
                    </div>


                </form>

---

<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:500,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 25,
        maxFiles: 25

    };
</script>

---

$file = $request->file('file');    
        $fileName = time().$file->getClientOriginalName();
        Storage::disk('local')->put($car_id.'/'.$fileName, File::get($file));
        Photo::create([
            'photo_name'=>$fileName,
            'car_id'=>$car_id
        ]);
$data = [
        'first_name'=>$car->user->first_name,
        'last_name'=>$car->user->last_name,
        'vin'=>$car->vin,
        'model'=>$car->model,
        'make' =>$car->make
    ];
        Mail::send('admin.email.send_album_notification',$data,function($message) use($car){
            $message->subject('Pictures for Test  - Example ');
            $message->from('noreply@example .com','Example ');
            $message->to($car->user->email,$car->user->full_name);
        });

Answer 1

let image_index = 0;
    Dropzone.autoDiscover = false;
    $(function () {
        let feedback_img_upload = new Dropzone('#image_upload', {
            paramName: "file",
            uploadMultiple: true,
            parallelUploads: 5,
            maxFilesize: 500,
            acceptedFiles: '.jpg, .png, .gif, .pdf, .jpeg',
            previewTemplate: document.getElementById('preview').innerHTML,
            addRemoveLinks: true,
            dictRemoveFile: 'Remove file',
            dictFileTooBig: 'Image is larger than 16MB',
            timeout: 10000,
            url: "/images-save",
            init: function () {
                this.on("removedfile", function (file) {
                    let inputObj = $.parseJSON(file['xhr'].response);

                    $.post({
                        url: '/images-delete',
                        data: {id: inputObj.image_name, _token: $('[name="_token"]').val()},
                        dataType: 'json',
                        success: function (data) {
                            if (file.xhr != undefined) {
                                let imgId = inputObj.file_name;
                                $('#inquiry_imgfile_' + imgId).remove();
                            }
                            return true;
                        }
                    });
                });
            },
        });

        feedback_img_upload.on("success", function (file, obj) {

            if (obj.status == 1) {
                image_index++;
                $('#inquiry_imgfile_main_div').append('<input class="inquiry_imgfile_upload" id="inquiry_imgfile_' + obj.file_name + '" name="inquiry_imgfile[]" value="" type="hidden"/>');
                $("#inquiry_imgfile_" + obj.file_name).val(obj.image_name);

            }
        });

    });
public function store(Request $request)
{
    try {
        $photos = $request->file('file');
        if (!is_array($photos)) {
            $photos = [$photos];
        }

        if (!is_dir($this->photos_path)) {
            mkdir($this->photos_path, 0777);
        }

        $img_names = [];
        for ($i = 0; $i < count($photos); $i++) {
            try{
                $photo = $photos[$i];
                $name = date('YmdHisu') . rand(1, 1000000) . $i;
                $file_name = $name . rand(1, 1000000);
                $resize_name = $file_name . '.' . $photo->getClientOriginalExtension();
                $img_names[] = $resize_name;
                $photo->move($this->photos_path, $resize_name);
                $this->save();
                $img = Image::make($photo);
                $img->text(' Mysale.lk', 200, 200, function ($font) {
                    $font->file(public_path('app/OpenSans-Light.ttf'));
                    $font->size(50);
                    $font->color('#fdf6e3');
                    $font->align('center');
                    $font->valign('top');
                });

                $img->save($this->photos_path . '/' . $resize_name);

                return Response::json([
                    'image_name' => $resize_name,
                    "status" => 1,
                    "file_name" => $file_name
                ], 200);
                exit();
            }catch (\Exception $ex){
                dd($ex);
            }

        }

    } catch (\Exception $e) {
        return Response::json([
            "status" => 0
        ], 401);
        exit();
    }


}

Answer 2

如果我分享我的经验，然后为每个表单创建一个唯一的 ID，例如

<form>
    <input type="hidden" value="{{ uniqid() .'-'. Carbon\Carbon::now()->timestamp }}" name="form-token"/>
<form>

现在您可以对每个表单进行识别了。将其插入每个图像。跟踪每张图像非常容易。

例如：

Photo::create([
    'photo_name'=>$fileName,
    'car_id'=>$car_id,
    'form_token'=>$request->get('form-token'),
]);

一旦你插入了你有 form_token 列来一次找到所有上传的图片。意思是假设您的用户上传了 5 张图片，并且每张图片都有相同的令牌。现在只需通过令牌找到该图像并发送到邮件中。

$photos = Photo::whereFormToken($request->get('form-token'))->get();
$data['photos'] = $photos;
Mail::send('admin.email.send_album_notification',$data,function($message) use($car){
   $message->subject('Pictures for Test  - Example ');
   $message->from('noreply@example .com','Example ');
   $message->to($car->user->email,$car->user->full_name);
});

现在您的邮件视图文件具有照片集合对象，因此您可以将其打印出来。像这样的：

@foreach($photos as $photo_key => $photo_value)
        <?php $pathToImage = public_path()."/".$photo_value->image_name; ?>
        <img src="{!! $photo_value->embed($pathToImage); !!}" style="max-width: 80%;padding-top: 20px;">
@endforeach