Question

我正在尝试创建一个可以上传多个图像的表单。我想要做的是获得一个进度条来展示为每个图像。我正在努力的是让进度条工作。我没有收到任何错误。我使用的是Laravel 5.5和vue 2

我的Frames.vue

<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>

如果我发现任何信息，请告诉我。

Answer 1

样式绑定:style="{width: change}"错误; change是一种方法，而不是数据属性。

这里有很多内容，您最好将进度条提取到一个单独的可重用组件中，以使代码更易于管理。

这是一个简单的进度条组件，我为您提供了一个想法：

＆＃13;

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);
  },
});

＆＃13;

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

＆＃13;

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <progress-bar :value="value"></progress-bar>
</div>

＆＃13;

获取进度条以使用vue 2

1 个答案: