系列文章目录
在日常的开发过程中,有很多时候我们需要用到上传文件的功能,一个大型项目,需要重复使用文件上传在,在这里分享给大家~
提示:这里只能上传word,pdf,png等格式
前言
提示:这里可以添加本文要记录的大概内容:
例如:使用组件封装达到灵活和可复用性。
提示:以下是本篇文章正文内容,下面案例可供参考
一、组件封装需要注意什么?
- 组件化思想:组件应该是独立的、可复用的部件,应该遵循单一职责原则,将组件的功能划分得尽可能细致。
- API 设计:组件的 API 设计要合理,要考虑到组件的可定制性和易用性。应该尽可能的提供必要的配置项和事件回调,同时避免提供过多的 API,导致 API 过于复杂。
- 生命周期:组件的生命周期要合理地使用,尤其是对于需要与外部交互的组件,要注意生命周期的时机,以便在组件的不同阶段进行相应的操作。
- 组件通信:组件通信是组件化开发中的一个重要问题,Vue 中提供了多种通信方式,包括 props、事件、 e m i t 、 emit、 emit、on、 p a r e n t 、 parent、 parent、children、provide、inject 等。在组件的设计中,需要考虑到组件之间的通信问题,合理地使用这些通信方式。
- 样式和布局:组件的样式和布局应该尽可能地与组件的功能分离,避免样式和布局影响到组件的功能和逻辑。
- 测试:组件封装完成后,需要进行充分的测试,包括单元测试和集成测试,以保证组件的质量和稳定性。
二、使用步骤
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>
总结
例如:以上就是子组件的全部内容父组件可根据实际需要进行筛减或添加, 具体项目应用需要根据实际情况。分享完毕,如果有什么功能缺陷,欢迎大家优化和批评指正。