عکس پروفایل

[farbod 3]

سلام روز بخیر

قسمت پروفایل کاربری از طریق ویدئو آموزشی که دوست عزیزمون گذاشتن عکس رو اضافه کردم و نمایش میده مشکلی نیست

برای اینکه ذخیره بشه و بعد از ذخیره نمایش بده در کنترلر چه کوئری باید بنویسم؟

در قسمت creat  و show باید کوئری اضافه بشه؟

 

[Special_One 57]

سلام اقا فربد خیلی مخلصیم

برای گزاشتن عکس باید یه تغییرات کوچولو بدی نسبت به کدهات من یه تصویر به دیتابیس با ویوجی اس و لاراول ارسال میکنم تا حساب کار دستت بیاد که چطور انجام میشه.

قسمت ویو جی اس

ما یک ورودی میخواهیم برای ارسال عکس
<!-- image  -->
<label for="p-image">تصویر محصول</label>
<input
        type="file"
        name="image"
        id="p-image"
        class="form-control form-control-sm"
        v-on:change="onImageChange"
/>

توجه داشته باش که فرم شما این اتربیوت را داشته باشه چون ولیدیت های لاراول که برای تصاویر قرار میدی برای شما کار نخواهد کرد من اینجا دومثال میزنم تا حالت های مختلف رو ببینی

 <form enctype="multipart/form-data" @submit.prevent="submit">
     <input
              type="text"
              name="name"
              class="form-control form-control-sm"
              v-model="name"
      />
         <!-- image  -->
      <label for="p-image">تصویر محصول</label>
      <input
              type="file"
              name="image"
              id="p-image"
              class="form-control form-control-sm"
              v-on:change="onImageChange"
      />
</form>

حالا میریم سراغ نوشتن متد ها قسمت ویو

<script>
export default {
    data() {
        return {
            name: "",
            image: "",
        };
    },
    methods: {
        onImageChange(e) {
            this.image = e.target.files[0];
        },
        submit() {
            //formdata
            let formData = new FormData();

            formData.append("name", this.name);
            
            formData.append("image", this.image);
           
            axios
                .post("/api/Product", formData, {})
                .then(function(response) {
                    console.log(response);
                })
                .catch((error) {
                    console.log(error)
                     }
                });
        }
    },
    mounted() {
        console.log("Component mounted.");
    }
};
</script>

خب من با axios داده های api خودم رو به متد store فرستادم حالا بریم سراغ کدهای بک اند

 public function store(Request $request)
    {
        //validatedData
        $validatedData = $request->validate([
            'name' => 'required|max:255|string',
            'image' => 'required|image|mimes:jpeg,png,jpg'
        ]);
        $product = new Product();
        $product->name = $request->name;
        //image save
        $image = $request->image;
        $filename  =   $request->slug . $request->id . '.' . $image->getClientOriginalExtension();
        $image->move(public_path('images/products'), $filename);
        $product->image =   $filename;
        try {
            //save request
            $product->save();
        } catch (Exception $exception) {
            switch ($exception->getCode()) {
                case  '':
                    return response()->json(['error' => $validatedData->messages()], 442);
            }
        }
    }

حالا زمان آپلود فایل شما در پوشته images/products ذخیره میشه

موفق باشید و امیدوارم کدها رو درک کرده باشید.