Vue 中自定义文件上传组件的实现代码

<template>
  <div class="file-upload-container">
    <button @click="openFileDialog">{{ buttonText }}</button>
    <input
      ref="fileInput"
      type="file"
      @change="handleFileChange"
      style="display: none"
    />
  </div>
</template>

export default {
  name: 'FileUpload',
  data() {
    return {
      buttonText: '上传文件',
      selectedFile: null
    };
  },
  methods: {
    openFileDialog() {
      this.$refs.fileInput.click();
    },
    handleFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        this.selectedFile = file;
        console.log('已选择文件:', this.selectedFile.name);
        // 这里可以进行后续的文件上传或其他相关操作，比如发送到父组件处理
        this.$emit('file-selected', this.selectedFile);
      }
    }
  }
};

.file-upload-container {
  text-align: center;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

<template>
  <div>
    <FileUpload @file-selected="handleUpload" />
  </div>
</template>
<script>
import FileUpload from './FileUpload.vue';
export default {
  components: {
    FileUpload
  },
  methods: {
    handleUpload(file) {
      // 在这里处理文件上传，比如发送到服务器
      console.log('开始上传文件:', file);
    }
  }
};
</script>