Vuetify V-File-输入多个文件

Question

非常简单。试图显示多个文件，但只有一个会显示，因为数组中总是只有一个。添加另一个文件时，在它被覆盖之前上传的文件。 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

Answer 1

我通过合并 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
      ]
    }
  }  
})

Demo

Answer 2

你可以做一件事

1. 创建一个隐藏的input 标签并添加对它的引用
2. 创建一个带有前置图标的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：这是一种方法。如果您发现任何理解困难，请在下方评论

Answer 3

你可以尝试做这样的事情。

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