Vue.js 中如何用按钮触发文件上传？

vue.js

2024-03-16 03:36:21

Vue.js 中用按钮触发文件上传

问题：自定义文件上传界面

在很多情况下，我们需要自定义文件上传界面，比如更改按钮外观、添加拖拽上传功能等。但是，原始的文件输入控件在视觉上并不美观，也不易于使用。如何隐藏原始的文件输入控件并使用按钮触发文件选择，以实现自定义文件上传功能呢？

解决方法：ref 关联元素

Vue.js 提供了 ref 特性，可以方便地关联 DOM 元素。我们可以使用 ref 来关联文件输入控件和按钮，从而实现用按钮触发文件选择的功能。

代码实现

HTML 模板：

<template>
  <div>
    <button id="file-button" @click="triggerFileInput">选择图片</button>
    <input type="file" id="file-input" hidden @change="onFileChange">
  </div>
</template>

Vue.js 组件：

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    onFileChange(event) {
      this.file = event.target.files[0];
    },
  },
  mounted() {
    this.$refs.fileInput.addEventListener('change', this.onFileChange);
  },
  beforeDestroy() {
    this.$refs.fileInput.removeEventListener('change', this.onFileChange);
  },
  ref: {
    fileInput: '#file-input',
  },
};
</script>

步骤详解

创建隐藏的文件输入控件： 使用 type="file" 创建一个隐藏的文件输入控件，并为其指定一个 id。
创建触发按钮： 创建用于触发文件选择的按钮，并为其指定一个 id。
在 Vue.js 组件中使用 ref 关联元素： 在 Vue.js 组件中，使用 ref 特性关联文件输入控件和按钮，这样就可以通过 this.$refs 访问这些元素。
触发文件选择： 在按钮的点击事件中，使用 this.$refs.fileInput.click() 触发文件输入控件的文件选择对话框。
处理文件选择： 在文件输入控件的改变事件中，获取选中的文件并存储在 this.file 中。