vue实现选择本地文件

2026-02-09 15:07:33VUE

使用 `<input type="file">` 实现文件选择

在 Vue 中可以通过原生 HTML <input type="file"> 实现本地文件选择，并结合 @change 事件获取文件信息。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <p v-if="selectedFile">已选择文件: {{ selectedFile.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      console.log("文件信息:", this.selectedFile);
    },
  },
};
</script>

通过 `ref` 绑定文件输入

如果需要手动触发文件选择对话框（例如通过按钮），可以使用 ref 绑定 <input> 元素，并通过 click() 方法触发选择。

<template>
  <div>
    <button @click="openFileDialog">选择文件</button>
    <input 
      type="file" 
      ref="fileInput" 
      @change="handleFileChange" 
      style="display: none"
    />
    <p v-if="selectedFile">已选择文件: {{ selectedFile.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    openFileDialog() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
  },
};
</script>

限制文件类型

可以通过 accept 属性限制用户只能选择特定类型的文件（如 .pdf 或图片格式）。

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

多文件选择

如果需要允许用户选择多个文件，可以添加 multiple 属性，并通过 event.target.files 获取文件列表。

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

<script>
methods: {
  handleMultipleFiles(event) {
    const files = Array.from(event.target.files);
    console.log("选择的文件列表:", files);
  },
}
</script>

使用第三方库（如 `vue-filepond`）

如果需要更高级的文件上传功能（如拖拽上传、预览等），可以使用第三方库 vue-filepond。

安装依赖：

npm install vue-filepond filepond

示例代码：

vue实现选择本地文件

<template>
  <div>
    <file-pond
      name="file"
      accepted-file-types="image/jpeg, image/png"
      :server="null"
      @processfile="handleFileUpload"
    />
  </div>
</template>

<script>
import vueFilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";

const FilePond = vueFilePond();

export default {
  components: {
    FilePond,
  },
  methods: {
    handleFileUpload(error, file) {
      if (error) {
        console.error("上传失败:", error);
        return;
      }
      console.log("文件已上传:", file.filename);
    },
  },
};
</script>