用vue + el-button封装一个上传文件的组件

用vue + el-button封装一个上传文件的组件

1、原因

用原生的input上传文件的话，相信很多人都遇到过这个问题。那就是给他添加类去修改它的样式，根本修改不了。为了解决这一痛点，封装一个组件显然是一个较好的解决方法。

2、代码

核心思想就是放一个上传文件类型的input框，把它的样式改为display:none;。让用户看不到这个上传文件的存在。然后用一个按钮去触发上传文件事件，还要用一个div盒子显示用户选择上传文件的文件名。

<template>
  <div class="content">
      <!-- 这个按钮如果不包裹一个div的话，那fileHeight会影响到按钮的高度 -->
    <div>
      <el-button
        :style="'margin-right:' + right + 'px;' + 'text-align: center;'"
        :size="btnSize"
        type="primary"
        @click="clickHandle()"
      >上传文件</el-button>
    </div>
    <input ref="file" type="file" style="display:none" @change="changeFile" />
    <div
      :style="'height:' + fileHeight + 'px;' + 'line-height:' + fileLineHeight + 'px;'"
      class="file-name"
    >
      <!-- 如果originFile没有要回显的文件名字进来，那么就是说不用回显文件。-->
      <div v-if="originFile == ''">{{ fileName == '' ? '请选择文件' : fileName }}</div>
      <div v-else>{{ fileName == '' ? originFile : fileName }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    originFile: {
      // originFile是用来解决文件回显的问题，有些项目在编辑的时候，需要实现文件回显
      type: String,
      default: "",
    },
    right: {
      // 按钮跟文件显示框之间的间隔距离
      type: Number,
      default: 20,
    },
    btnSize: {
      // 按钮大小
      type: String,
      default: "",
    },
    fileHeight: {
      // 文件框的高度
      type: Number,
      default: 38,
    },
    fileLineHeight: {
      // 文件框的行高
      type: Number,
      default: 38,
    },
  },
  data() {
    return {
      file: "",
      fileName: "",
    };
  },
  methods: {
    clickHandle() {
      this.$refs.file.click()
    },
    changeFile(e) {
      this.file = e.target.files
      this.fileName = e.target.files[0].name
      this.$emit("change", this.file) // 拿到了文件之后，向父组件发射事件，随便把获取到的文件也传出去
    },
  }
}
</script>
<style scoped>
.content {
  display: flex;
}
.content .file-name {
  width: 100%;
  padding: 0 15px;
  border: 1px solid rgb(64, 158, 255);
  border-radius: 8px;
}
</style>

3、使用方法

<template>
  <div>
    <up-load @change="getFile" originFile="123dsfdf.txt"></up-load>
  </div>
</template>

<script>
import UpLoad from './UpLoad.vue'
export default {
  components: {
    UpLoad
  },
  methods: {
    getFile(files) {
      console.log('files', files)
    }
  }
}
</script>

<style>

</style>

4、效果图