非常简单。试图显示多个文件,但只有一个会显示,因为数组中始终只有一个。添加其他文件时,文件被覆盖之前已上传。 this.files始终只是一个文件,不会添加。如何添加文件,而不是始终覆盖?任何帮助或指示将不胜感激。
<v-file-input
v-model="files"
small-chips
show-size
multiple
clearable
>
<template v-slot:selection="{ text, index, file }">
<v-chip
small
text-color="white"
color="#295671"
close
@click:close="remove(index)"
>
{{ text }}
</v-chip>
</template>
</v-file-input>
<script>
export default {
data: () => ({
files: []
}),
methods: {
remove (index) {
this.files.splice(index, 1)
}
}
}
</script>
工作示例:https://codepen.io/jhernandez_dev/pen/YzzRxMq?&editable=true&editors=101#anon-signup
答案 0 :(得分:2)
我通过合并2个文件数组解决了这个问题。一个用于当前所选文件,另一个用于所有文件...
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
currFiles: [],
files: []
}),
methods: {
remove (index) {
this.files.splice(index, 1)
},
inputChanged () {
console.log(this.files)
this.files = [
...this.currFiles,
...this.files
]
}
}
})
答案 1 :(得分:0)
你可以做一件事
input
标签并为其添加引用v-select
组件,并将外部图标附加为动作的一部分模板
<input type="file" hidden multiple ref="files" @change="listFiles">
<v-select
v-model="files"
:items="files"
chips
readonly
prepend-icon="attach_file"
multiple
@click="$refs.files.click()"
@click:prepend="$refs.files.click()"
@click:append-outer="uploadHere"
label="Files"
append-icon
append-outer-icon="cloud_upload"
></v-select>
脚本
export default {
data() {
return {
files: []
};
},
methods: {
listFiles() {
this.files = [];
for (let i = 0; i < this.$refs.files.files.length; i++)
this.files.push(this.$refs.files.files[i].name);
},
uploadHere()
{
console.log("Uploading");
let formData = new FormData();
// iteratate this.$refs.files.files
// add data to formData
// Post the form data with 'Content-Type': 'multipart/form-data' via fetch or Axios
console.log("Uploaded");
this.files = []
}
},
created() {}
};
PS:这是一种方法。如果您难以理解,请在下面评论
答案 2 :(得分:0)
你可以尝试做这样的事情。
<template>
<v-file-input
id="uploadedfiles"
v-model="files"
show-size
counter
multiple
clearable
label="File input"
name="uploadedfiles"
:rules="[filesizeLimit]"
@change="inputChanged"
>
<template #selection="{ index, text }">
<v-chip small label close color="primary" @click:close="deleteChip(index, text)">{{ text }}</v-chip>
</template>
</v-file-input>
</template>
<script>
export default {
methods: {
deleteChip(index, text) {
// Prompt here with text if required
this.previousFiles.splice(index, 1)
this.files = this.previousFiles
},
inputChanged() {
this.files = []
const uploadedFiles = this.$refs.form.$el.querySelector('#uploadedfiles').files
for (let i = 0; i < uploadedFiles.length; i++) {
if (
this.previousFiles !== undefined &&
this.previousFiles !== null &&
this.previousFiles.length <= 0
) {
this.previousFiles.push(uploadedFiles[i])
} else {
const index = this.previousFiles.findIndex((x) => x.name === uploadedFiles[i].name)
if (index >= 0) {
this.previousFiles.splice(index, 1)
}
this.previousFiles.push(uploadedFiles[i])
}
}
this.files = this.previousFiles
},
},
}
</script>