رفتن به مطلب
انجمن پشتیبانی لاراول ایران

هاست لاراول با پشتیبانی 24 ساعته و امکانات کامل از مدیرهاست

farbod

عکس پروفایل

Recommended Posts

سلام روز بخیر

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

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

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

 

66.JPG

Share this post


Link to post
Share on other sites

هاست لاراول با پشتیبانی 24 ساعته و امکانات کامل از مدیرهاست

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

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

قسمت ویو جی اس

ما یک ورودی میخواهیم برای ارسال عکس
<!-- 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 ذخیره میشه

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

Share this post


Link to post
Share on other sites

وارد این گفتگو شوید

میتوانید پیام خود را ارسال کنید و بعد ثبت نام نمایید. در صورتی که حساب کاربری دارید, هم اکنون وارد شوید و در این گفتگو شرکت کنید.

مهمان
پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  Only 75 emoji are allowed.

×   لینک شما به صورت اتوماتیک جایگذاری شد.   نمایش به عنوان یک لینک به جای

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • جدید...