@igordata1

Как сделать редактирование картинки в редактировании товара?

Не могу разобраться, помогите пожалуйста, если у вас есть время
нужно придумать как можно удалять существующие картинки, загрузка новых картинок и вывод из базы картинок при редактировании
Добавление сделал по аналогии добавления товара. Осталось удаление и показ картинок данного товара. Вывод товара примерно набросал
public function edit($id)
    {
        $categories = Product::whereNull('category_id')->with('childrenCategories')->get();
        $product = Product::where('id',$id)->first();
 
        return view('product.edit', compact('categories','product'));
    }

    public function edit_store(Request $request, $id)
    {
        $this->validate($request, [
            'title' => 'required',
            'slug'   =>  'required|unique:products',
            'text'  =>  'required',
            'path.*'  =>  'nullable|image',
        ]);
 
        $product =  Product::find($id);
        $product->title = $request->input('title');
        $product->slug = $request->input('slug');
        $product->text = $request->input('text');
        $product->keywords = $request->input('keywords');
        $product->description = $request->input('description');
        $product->published = $request->input('published');
        $product->category_id = $request->input('category_id');
        $product->price = $request->input('price');
        $product->authorized_price = $request->input('authorized_price');
        $product->short_description = $request->input('short_description');
        $product->save();
        $path =public_path().'/uploads/product_images/';
        $file = $request->file('path');
        foreach ($file as $f) {
            $filename = Str::random(20) .'.' . $f->getClientOriginalExtension() ?: 'png';
            $img = ImageInt::make($f);
            $img->resize(500,500)->save($path . $filename);
            $image = new Image();
            $image->path = '/uploads/product_images/'.$filename;
            $image->title = $request->input('title');
            $image->product_id =  $product->id;
            $image->save();
        }
        return redirect('/product/edit/'.$product->id)->with('info', 'Данные сохранены');
    } 
 
        <input type="file"  name="path[]" id="path[]" multiple accept="image/*">
        <div id="for_preview_uploads">
        </div>
        <script>
            function resizeImage(img) { 
                const W = parseInt(img.width / 4);
                const H = parseInt(img.height / 4);
 
                const canvas = document.createElement("canvas");
                canvas.width = W;
                canvas.height = H;
 
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, W, H);
 
                const resizedImg = new Image();
                resizedImg.src = canvas.toDataURL('image/jpeg', 1);
                document.querySelector("#for_preview_uploads").append(resizedImg);
            }
 
            function handleFiles(e) {
                for (const file of this.files) {
                    const img = document.createElement("img");
                    const reader = new FileReader();
 
                    reader.addEventListener("load", (e) => {
                        img.addEventListener("load", (e) => {
                            resizeImage(img);
                        });
                        img.src = e.target.result;
                    });
 
                    reader.readAsDataURL(file);
                }
            }
 
            const fileInput = document.getElementById("path[]");
 
            fileInput.addEventListener("change", handleFiles, false);
        </script>
        @forelse ($products as $product)
            <div class="products card" style="width: 18rem;">
                <div class="card-body">
                    <p class="card-images">
                        @forelse ($product->images as $image)
                            <img src="{{$image->path }} " alt="{{$image->title}}">
                        @empty
                            Нет фотографий
                        @endforelse
                    </p>
                </div>
            </div>
        @empty
            <div>Нет товаров</div>
        @endforelse
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега Laravel
Как реализовать вывод картинок и удаление при редактировании? Что почитать для этого?

Ответ на первый вопрос:
<img src="{{$image->path }} " alt="{{$image->title}}">

+ https://laravel.com/docs/7.x/filesystem#file-urls

Ответ на второй: https://laravel.com/docs/7.x/filesystem#deleting-files

Ответ на третий: https://laravel.com/docs/7.x
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы