آموزش آپلود تصویر به وسیله axios در vue

آموزش آپلود تصویر به وسیله axios در vue

دسته : Vue

کد محصول : 86

قیمت : رایگان

به نام خالق زیبایی ها با عرض سلام خدمت دوستداران سایت جاب تیم، امروز در مورد آپلود فایل در فریم ورک vue مثالی کاربردی را آموزش خواهیم داد. آپلود فایل در پروژه لاراول به وسیله AXIOS در FRAMEWORK VUE2 استفاده از فریم ورک vue در پروژه های لاراول گسترش چشمگیری داشته است و با مثال های مختلف منتشر شده، آموزش سریع و بدون دردسر برای ما آماده گردیده است یکی از مثال های کاربردی و همیشه مورد استفاده آپلود فایل می باشد پس قدم به قدم این پروژه کوچک را با هم انجام خواهیم داد. قدم نخست شما برای ایجاد پروژه لاراول خود به وسیله دستور زیر مین...


به نام خالق زیبایی ها

با عرض سلام خدمت دوستداران سایت جاب تیم، امروز در مورد آپلود فایل در فریم ورک vue مثالی کاربردی را آموزش خواهیم داد.

آپلود فایل در پروژه لاراول  به وسیله AXIOS  در FRAMEWORK VUE2

استفاده از فریم ورک vue در پروژه های لاراول گسترش چشمگیری داشته است و با مثال های مختلف منتشر شده، آموزش سریع و بدون دردسر برای ما آماده گردیده است یکی از مثال های کاربردی و همیشه مورد استفاده آپلود فایل می باشد پس قدم به قدم این پروژه کوچک را با هم انجام خواهیم داد.

  • قدم نخست شما برای ایجاد پروژه لاراول خود به وسیله دستور زیر مینمایید 
composer create-project --prefer-dist laravel/laravel blog
  • سپس در مرحله دوم در فایل routes/web.php که در این مسیر قرار دارد اقدام به تعریف Route مورد نظر خود میکنید 
Route::post('formSubmit','ImageController@formSubmit');
  • سپس در مرحله سوم اقدام به ایجاد Controller  خود app/Http/Controllers/FileController.php در این مسیر به شکل زیر میکنید 
​
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request $request)
    {
    	$imageName = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $imageName);
        
    	return response()->json(['success'=>'You have successfully upload image.']);
    }
}

​

 

  • در مرحله بعدی اقدام به نصب module های js که در6  framework laravel  قرار دارند به وسیله دستور زیر میکنیم 
composer require laravel/ui --dev
php artisan ui vue
  • سپس از دستور زیر استفاده میکنیم .
npm install
  • سپس در مسیر resources/assets/js/app.js اقدام به اضافه کردن component ای به نام  ExampleComponent.vue مانند ذیل میکنیم
require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
const app = new Vue({
    el: '#app'
});
  • سپس مانند ذیل در مسیر resources/assets/js/components/ExampleComponent.vue کامپوننت مورد نظر را ایجاد میکنیم.
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel Vue JS Image Upload - ItSolutionStuff.com</div>
 
                    <div class="card-body">
                        <div v-if="success != ''" class="alert alert-success" role="alert">
                          {{success}}
                        </div>
                        <form @submit="formSubmit" enctype="multipart/form-data">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Image:</strong>
                        <input type="file" class="form-control" v-on:change="onImageChange">
 
                        <button class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              name: '',
              image: '',
              success: ''
            };
        },
        methods: {
            onImageChange(e){
                console.log(e.target.files[0]);
                this.image = e.target.files[0];
            },
            formSubmit(e) {
                e.preventDefault();
                let currentObj = this;
 
                const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
 
                let formData = new FormData();
                formData.append('image', this.image);
 
                axios.post('/formSubmit', formData, config)
                .then(function (response) {
                    currentObj.success = response.data.success;
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>
  • در نهایت فایل resources/views/welcome.blade.php به شکل زیر تغییر دهید 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 5.6 Vue JS Image Upload - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

 

فراموش نکنید  دستور زیر را برای update شدن app.js  وارد نمایید .

npm run dev

 

  • آموزش آپلود تصویر به وسیله axios در vue را با دوستان خود به اشتراک بگذارید.
  • سوالات خود را در بخش پرسش و پاسخ این مطلب ثبت کنید.
  • مطالب خود را در جاب تیم به اسم خود ثبت کنید ارسال مطلب


ثبت سوال/پاسخ
در مورد کاربر : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."
اشتراک گذاری این مطلب
{