vue 2와 함께 작동하도록 진행 표시줄 가져오기

vue 2와 함께 작동하도록 진행 표시줄 가져오기

여러 이미지를 업로드할 수 있는 폼을 만들려고 합니다.각 이미지에 대해 진행 표시줄을 표시하려고 합니다.내가 애쓰고 있는 건 진행 표시줄을 작동시키는 거야오류는 발생하지 않습니다.Laravel 5.5와 vue 2를 사용하고 있습니다.

마이 프레임표시하다

<template>
    <div class="content-form">
        <form @submit.prevent="submit(data)" enctype="multipart/form-data" ref="myFileInputForm">
            <div class="form-group">
                <label>Title</label>
                <input type="text" id="title" class="form-control" name="title" v-model="model.title">
            </div>

            <div class="form-group">
                <input type="file" name="image[]" multiple="multiple" ref="fileInput" v-on:change="change">
                {{ currentProgress }}

                <div v-for="image in _images">
                    <img :src="image" width="100">
                </div>
            </div>

            <div class="progress">
                <div class="progress-bar" role="progressbar" :style="{width: change}">

                </div>
            </div>

            <input type="submit" class="btn btn-primary" value="Submit">
        </form>
    </div>
</template>

<script>

    export default {

        props: [
            'data',
            'images'
        ],

        mounted() {
            if(this.data){
                Object.assign(this.model, this.data);
            }
        },

        data() {
            return {
                model: {
                    id: '',
                    title: '',
                    image: ''
                },

                currentProgress: 0,
            }
        },

        computed: {
            _images(){
                var images = [];

                if(this.images){
                    for(let i = 0; i < this.images.length; i++){
                        images[i] = window.location.origin+'/frame_images/'+this.images[i];
                    }

                    return images;
                }
            },
        },

        methods: {

            change(percentCompleted){
                this.currentProgress = percentCompleted
                return this.currentProgress;
            },

            save(){

                let imageArray = this.$refs.fileInput.files;

                var formData = new FormData();

                var config = {
                    onUploadProgress: function(progressEvent){
                        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);

                        this.currentProgress = percentCompleted
                    }
                }

                formData.append('title', this.model.title);
                for(let i = 0; i < imageArray.length; i++){
                    formData.append('image[]', imageArray[i])
                }

                if(this.id){
                    formData.append('_method', 'PUT');
                    return axios.post('/frames/'+this.id, formData);
                }else{
                    return axios.post('/frames/', formData, config);
                }
            },

            submit(){
                this.save().then(function(response){
                    window.location = response.data.redirect;

                });
            },
        }
    }
</script>

제가 빠뜨린 정보가 있으면 알려주세요.

스타일 바인딩:style="{width: change}"틀렸습니다.change는 데이터 속성이 아닌 메서드입니다.

많은 일이 일어나고 있습니다.코드를 관리하기 쉽게 하려면 진행 표시줄을 별도의 재사용 가능한 컴포넌트로 추출하는 것이 좋습니다.

다음은 제가 아이디어를 주기 위해 만든 간단한 진행 표시줄을 통해 아이디어를 얻을 수 있습니다.

Vue.component('progress-bar', {
  template: `
    <div class="progress-bar">
      <div class="progress-bar-bar" :style="barStyle"></div>
    </div>
  `,
  props: {
    min: { type: Number, default: 0 },
    max: { type: Number, default: 1 },
    value: { type: Number, default: 0 },
  },
  computed: {
    barStyle() {
      const frac = Math.min(1, Math.max(0, (this.value - this.min) / (this.max - this.min) || 0));
      return { width: frac * 100 + '%' };
    },
  },
});

new Vue({
  el: '#app',
  data: {
    value: 0,
  },
  created() {
    // Simulate loading
    setInterval(() => {
      this.value += 0.1;
      if (this.value > 1) this.value = 0;
    }, 500);
  },
});

.progress-bar {
  height: 5px;
  background-color: #eee;
}

.progress-bar-bar {
  height: 100%;
  background-color: #007fff;
  transition: width 0.2s ease-in-out;
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <progress-bar :value="value"></progress-bar>
</div>

언급URL : https://stackoverflow.com/questions/47766767/getting-the-progress-bar-to-work-with-vue-2