Vue文件上传未删除文件

时间:2019-02-20 07:48:54

标签: javascript vue.js vuejs2 frontend vue-component

大家好,有人在这里使用Vue上传组件https://lian-yue.github.io/vue-upload-component/#/en/documents

问题是删除文件仅适用于第一次删除,第二次,第三次,等等,删除文件无效。我在这里https://lian-yue.github.io/vue-upload-component/#/en/documents#instance-methods-remove中遵循了文档步骤。仅供参考,默认情况下,文件数组不是空数组时会发生这种情况。下面是我的代码,任何帮助将不胜感激。谢谢

模板

<template>
    <div class="custom-file-upload">
        <h3>Attachments</h3>
        <v-card elevation-0 :class="'file-upload text-xs-center elevation-0'">
            <p class="file-error red">{{ fileError }}</p>
            <p class="text-xs-center text-upload">
                <v-icon primary :class="'d-block'">cloud_upload</v-icon>
                <span>Drag and drop file to upload</span>
                <span>Maximum upload size 20MB</span>
                <v-btn color="success" :class="'d-block'">
                    browse from computer <v-icon right dark>file_copy</v-icon>
                </v-btn>
            </p>

            <vue-file-upload 
                v-model="taskFiles" 
                ref="fileUpload" 
                :size="fileSizeLimit"
                :multiple="true"
                :drop="true"
                :drop-directory="true"
                @input-filter="filterFile"
                @input-file="addFile">
            </vue-file-upload>

            <v-list one-line v-if="taskFiles.length">
                <template v-for="(file, index) in taskFiles">
                    <v-divider></v-divider>
                    <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>
                                <span class="text-truncate">{{file.name}}</span>
                                <v-icon color="red" right @click.stop.prevent="remove(file)">delete_forever</v-icon>
                            </v-list-tile-title>
                        </v-list-tile-content>
                    </v-list-tile>
                </template>
            </v-list>
        </v-card>
    </div>
</template>

数据属性

data() {
        return {
            taskFiles: [{"name":"file_1.jpg"}, {"name":"file_2.jpg"}, {"name":"file_3.jpg"}],
        }
    }

方法

methods: {
       remove( fileName ) {
            console.log(this.taskFiles)
            this.$refs.fileUpload.remove(fileName)
        }
}

0 个答案:

没有答案