vue实现选择本地文件

2026-03-26 23:49:52VUE

使用 input 元素实现文件选择

在 Vue 中可以通过原生 HTML 的 <input type="file"> 元素实现文件选择功能。创建一个文件输入组件：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  methods: {
    handleFileChange(event) {
      const files = event.target.files
      if (files.length > 0) {
        console.log('Selected file:', files[0])
      }
    }
  }
}
</script>

使用 v-model 绑定文件

虽然不能直接使用 v-model 绑定文件输入，但可以创建自定义双向绑定：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
      this.$emit('update:modelValue', this.selectedFile)
    }
  }
}
</script>

添加文件类型限制

可以通过 accept 属性限制选择的文件类型：

vue实现选择本地文件

<input 
  type="file"
  accept=".jpg,.jpeg,.png,.pdf"
  @change="handleFileChange"
/>

实现多文件选择

添加 multiple 属性允许选择多个文件：

<input 
  type="file"
  multiple
  @change="handleFilesChange"
/>

methods: {
  handleFilesChange(event) {
    const files = Array.from(event.target.files)
    files.forEach(file => {
      console.log(file.name, file.size)
    })
  }
}

自定义样式

隐藏原生 input 元素，通过按钮触发文件选择：

vue实现选择本地文件

<template>
  <div>
    <button @click="$refs.fileInput.click()">选择文件</button>
    <input 
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleFileChange"
    />
  </div>
</template>

使用第三方库

可以考虑使用 vue-filepond 等专门处理文件上传的库：

import vueFilePond from 'vue-filepond'

// 注册组件
components: {
  FilePond: vueFilePond.FilePond
}

<file-pond
  allow-multiple
  accepted-file-types="image/jpeg, image/png"
  v-on:init="handleFilePondInit"
/>

文件预览功能

在文件选择后显示预览信息：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="selectedFile">
      <p>文件名: {{ selectedFile.name }}</p>
      <p>文件大小: {{ (selectedFile.size / 1024).toFixed(2) }} KB</p>
    </div>
  </div>
</template>