vue实现文件列表

实现文件列表的基本结构

在Vue中实现文件列表功能，可以通过v-for指令动态渲染文件数据。需要准备一个数组存储文件信息，每个文件对象包含名称、大小、类型等属性。

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.name">
        {{ file.name }} ({{ formatSize(file.size) }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { name: 'document.pdf', size: 1024, type: 'application/pdf' },
        { name: 'image.jpg', size: 2048, type: 'image/jpeg' },
        { name: 'report.docx', size: 3072, type: 'application/msword' }
      ]
    }
  },
  methods: {
    formatSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
  }
}
</script>

添加文件上传功能

通过<input type="file">元素实现文件选择，使用@change事件处理文件添加逻辑。

<template>
  <div>
    <input type="file" multiple @change="handleFileUpload">
    <ul>
      <li v-for="(file, index) in files" :key="index">
        {{ file.name }} 
        <button @click="removeFile(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    handleFileUpload(event) {
      const uploadedFiles = Array.from(event.target.files)
      this.files = [...this.files, ...uploadedFiles]
      event.target.value = null
    },
    removeFile(index) {
      this.files.splice(index, 1)
    }
  }
}
</script>

显示文件类型图标

根据文件扩展名显示对应的图标，可以使用字体图标库或自定义图片。

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.name">
        <i :class="getFileIcon(file.name)"></i>
        {{ file.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    getFileIcon(filename) {
      const extension = filename.split('.').pop().toLowerCase()
      const icons = {
        pdf: 'fas fa-file-pdf',
        jpg: 'fas fa-file-image',
        png: 'fas fa-file-image',
        docx: 'fas fa-file-word',
        xlsx: 'fas fa-file-excel'
      }
      return icons[extension] || 'fas fa-file'
    }
  }
}
</script>

实现文件预览功能

对于图片和PDF等文件类型，可以添加预览功能。

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.name">
        <span @click="previewFile(file)">{{ file.name }}</span>
      </li>
    </ul>
    <div v-if="previewUrl">
      <img v-if="isImage" :src="previewUrl" style="max-width: 300px">
      <iframe v-else :src="previewUrl" style="width: 100%; height: 500px"></iframe>
      <button @click="previewUrl = null">关闭预览</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
      isImage: false
    }
  },
  methods: {
    previewFile(file) {
      if (file.type.startsWith('image/')) {
        this.isImage = true
        this.previewUrl = URL.createObjectURL(file)
      } else {
        this.isImage = false
        this.previewUrl = URL.createObjectURL(file)
      }
    }
  }
}
</script>

添加文件拖放功能

通过HTML5的拖放API实现文件拖放上传功能。

<template>
  <div 
    @dragover.prevent="dragover = true"
    @dragleave.prevent="dragover = false"
    @drop.prevent="handleDrop"
    :class="{ 'drag-active': dragover }"
  >
    <p>拖放文件到此处</p>
    <ul>
      <li v-for="file in files" :key="file.name">
        {{ file.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragover: false,
      files: []
    }
  },
  methods: {
    handleDrop(event) {
      this.dragover = false
      const droppedFiles = event.dataTransfer.files
      this.files = [...this.files, ...Array.from(droppedFiles)]
    }
  }
}
</script>

<style>
.drag-active {
  border: 2px dashed #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}
</style>

实现文件下载功能

为列表中的文件添加下载按钮，通过创建临时URL实现文件下载。

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.name">
        {{ file.name }}
        <button @click="downloadFile(file)">下载</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(file) {
      const url = URL.createObjectURL(file)
      const link = document.createElement('a')
      link.href = url
      link.download = file.name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    }
  }
}
</script>