vue2封装一个文件上传的组件

系列文章目录

在日常的开发过程中，有很多时候我们需要用到上传文件的功能，一个大型项目，需要重复使用文件上传在，在这里分享给大家~

---

提示：这里只能上传word，pdf，png等格式

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：使用组件封装达到灵活和可复用性。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件封装需要注意什么？

1. 组件化思想：组件应该是独立的、可复用的部件，应该遵循单一职责原则，将组件的功能划分得尽可能细致。
2. API 设计：组件的 API 设计要合理，要考虑到组件的可定制性和易用性。应该尽可能的提供必要的配置项和事件回调，同时避免提供过多的 API，导致 API 过于复杂。
3. 生命周期：组件的生命周期要合理地使用，尤其是对于需要与外部交互的组件，要注意生命周期的时机，以便在组件的不同阶段进行相应的操作。
4. 组件通信：组件通信是组件化开发中的一个重要问题，Vue 中提供了多种通信方式，包括 props、事件、$emit、$on、$parent、$children、provide、inject 等。在组件的设计中，需要考虑到组件之间的通信问题，合理地使用这些通信方式。
5. 样式和布局：组件的样式和布局应该尽可能地与组件的功能分离，避免样式和布局影响到组件的功能和逻辑。
6. 测试：组件封装完成后，需要进行充分的测试，包括单元测试和集成测试，以保证组件的质量和稳定性。

二、使用步骤

1. 这里使用的是elementui 中 el-upload组件

代码如下（示例）：

<el-upload class="upload-demo" :multiple="multiple" action="#" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="beforeUpload" accept=".xlsx,.docx,.pdf,.png" :http-request="UploadFile" :limit="limit" :on-exceed="handleExceed" :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传word/pdf/png文件</div>
</el-upload>

2. 方法内容

代码如下（示例）：

// 上传的时候 我需要做一些什么是
    async UploadFile(file) {
      let Flag =
        this.fileList &&
        this.fileList.some(item => {
          if (file.file.name === item.name) {
            this.$message.error('文件名称重复')
            return true
          }
        })
      if (!Flag) {
        this.fileList.push(file.file)
      } else {
        this.fileList = this.fileList.slice(0, this.fileList.length)
      }
    },

    beforeUpload(file) {
      // console.log(file.name, '检查大小 格式')
    },
    // 文件移除
    handleRemove(file, fileList) {
      // console.log('文件移除')
      this.fileList = this.fileList.filter(item => {
        return item.uid != file.uid
      })
    },
    handlePreview(file) {
      // console.log(file, 'handlePreview')
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    clearFileList() {
      this.fileList = []
    }
  }

---

3. 全部代码(详细)

代码如下（示例）：

<template>
  <el-upload class="upload-demo" :multiple="multiple" action="#" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="beforeUpload" accept=".xlsx,.docx,.pdf,.png" :http-request="UploadFile" :limit="limit" :on-exceed="handleExceed" :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传word/pdf/png文件</div>
  </el-upload>
</template>
<script>
export default {
  props: {
    limit: {
      type: Number,
      default: 3
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  watch: {
    fileList: {
      handler() {
        // console.log('000')
        this.$emit('fileList', this.fileList)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 上传的时候 我需要做一些什么是
    async UploadFile(file) {
      let Flag =
        this.fileList &&
        this.fileList.some(item => {
          if (file.file.name === item.name) {
            this.$message.error('文件名称重复')
            return true
          }
        })
      if (!Flag) {
        this.fileList.push(file.file)
      } else {
        this.fileList = this.fileList.slice(0, this.fileList.length)
      }
    },

    beforeUpload(file) {
      // console.log(file.name, '检查大小 格式')
    },
    // 文件移除
    handleRemove(file, fileList) {
      // console.log('文件移除')
      this.fileList = this.fileList.filter(item => {
        return item.uid != file.uid
      })
    },
    handlePreview(file) {
      // console.log(file, 'handlePreview')
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    clearFileList() {
      this.fileList = []
    }
  }
}
</script>
<style scoped>
::v-deep .el-upload__tip {
  margin-top: -7px !important;
  margin-right: 30px !important;
}
</style>

总结

例如：以上就是子组件的全部内容父组件可根据实际需要进行筛减或添加, 具体项目应用需要根据实际情况。分享完毕，如果有什么功能缺陷，欢迎大家优化和批评指正。