Всем здравствуйте, опишу свои действия пошагово:
1)Установил laravel
2)В командной строке ввел npm install
3)Создал компонент ImageUpload.vue
<template>
<div class="container">
<div class="progress" style="height: 40px">
<div class="progress-bar" role="progressbar" :style="{width:fileProgress + '%' }">
{{ fileCurrent }}%
</div>
</div>
<hr>
<input type="file" name="image" multiple="" @change="fileInputChange">
<hr>
<div class="row">
<div class="col-sm-6">
<h3 class="text-center">Файлы в очереди ({{ files0rder.length }})</h3>
<ul class="list-group">
<li class="list-group-item" v-for="file in files0rder">
{{ file.name }} : {{ file.type }}
</li>
</ul>
</div>
<div class="row">
<div class="col-sm-6">
<h3 class="text-center">Загруженные файлы ({{ fileFinish.length }})</h3>
<ul class="list-group">
<li class="list-group-item" v-for="file in fileFinish">
{{ file.name }} : {{ file.type }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
files0rder: [],
fileFinish:[],
fileProgress:0,
fileCurrent:''
}
},
methods:{
async fileInputChange(){
let files = Array.from(event.target.files);
this.files0rder = files.slice();
for (let item of files){
await this.uploadFile(item);
}
},
async uploadFile(item) {
let form = new FormData();
form.append('image', item);
await axios.post('/image/upload', form, {
onUploadProgress:(itemUpload) => {
this.fileProgress = Math.round( (itemUpload.loaded / itemUpload.total) * 100);
this.fileCurrent = item.name + ' ' + this.fileProgress;
}
}
)
.then(response => {
this.fileprogress = 0;
this.fileCurrent = '';
this.fileFinish.push(item);
this.files0rder.splice(item, 1);
})
.catch(error => {
console.log(error);
})
}
}
}
</script>
4) Добавил маршрут в app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('image-upload', require('./components/ImageUpload.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app'
});
5) Добавил тег отображения скрипта на главную
<div id="app" class="input-group mb-4">
<h4>Добавить фото</h4>
<image-uoload></image-uoload>
</div>
6)В командной строке набрал npm run dev
Но скрипт почему то не отображается на главной, в чем причина подскажите пожалуйста?
