Hello，大家好，我是 Sunday。
最近刷新闻的时候，看到了一个让我眼前一亮的标题：中石化申请基于 Vue 的文件上传组件二次封装方法和装置专利，解决上传功能开发繁琐问题。
不是....等会....啥情况。。。。 上传功能也能申请专利了？
为了避免被标题党，我专门去 国家知识产权局 的官网上查询了一下，还真有...
并且，这个专利从 23 年就已经申请了，只不过是在这两天才公布出来。
整个专利的核心思路是这样的：
在页面中使用
el-upload+el-progress组合封装上传组件，在上传前判断目标文件大小是否符合要求，上传中显示进度，上传完成后进行预处理、保存、目标上传，并最终封装为 Vue 组件。
看起来是不是很熟悉？
这他喵的也太熟悉了啊，这不就是我们在实际开发中经常封装的业务上传逻辑吗？？？
然后，我就好奇 以 vue 为关键字 对专利进行了搜索，不搜不知道，一搜吓一跳，大家自己看吧......
整个搜索结果高达 356 页，从 编辑器 到 日历组件 到 动态渲染方法 都有专利......
但是，这样问题就来了呀，以后咱们写代码是不是得交专利费了？？我二次封装个 el-upload 会不会被律师函警告？
应该不至于吧...
咱也写一个“专利级”的上传组件吧！
虽然被人家申请了专利，但是上传功能咱也不能不用呀。所以，咱们就绕开一点它的专利标准，也做一个 vue 上传组件，甚至还能加点小优化。
我们用 Vue 3 + Element Plus 实现一个增强上传组件，具备以下功能：
- 上传前大小和类型校验
- 上传中进度显示
- 上传成功后模拟预处理流程（比如生成缩略图、入库等）
- 使用组合式 API，支持封装为复用组件
直接上代码：
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const fileList = ref([])
const uploadProgress = ref(0)
const isUploading = ref(false)
// 上传前校验：大小 + 类型
const beforeUpload = (file) => {
const MAX_SIZE_MB = 5
const allowTypes = ['image/jpeg', 'image/png', 'application/pdf']
const isSizeValid = file.size / 1024 / 1024 < MAX_SIZE_MB
const isTypeValid = allowTypes.includes(file.type)
if (!isSizeValid) {
ElMessage.error(`文件大小不能超过 ${MAX_SIZE_MB}MB`)
return false
}
if (!isTypeValid) {
ElMessage.error(`不支持该文件类型：${file.type}`)
return false
}
return true
}
// 上传进度
const handleProgress = (event) => {
uploadProgress.value = Math.floor(event.percent)
isUploading.value = true
}
// 上传成功后模拟预处理
const handleSuccess = async (response, file) => {
console.log('上传成功，准备执行预处理...')
await simulatePreprocess(file)
ElMessage.success('文件处理完成')
isUploading.value = false
}
// 模拟后处理逻辑
const simulatePreprocess = (file) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log('模拟处理完成：', file.name)
resolve()
}, 1000)
})
}
</script>
<template>
<el-upload
class="custom-uploader"
action="https://lgd_sunday.club"
:file-list="fileList"
:before-upload="beforeUpload"
:on-progress="handleProgress"
:on-success="handleSuccess"
:show-file-list="true"
drag
>
<el-button type="primary" :loading="isUploading">点击上传</el-button>
<template #tip>
<div style="margin-top: 8px; font-size: 12px; color: #888;">
仅支持 JPG/PNG/PDF，最大不超过 5MB
</div>
</template>
</el-upload>
<el-progress
v-if="isUploading"
:percentage="uploadProgress"
style="margin-top: 16px;"
:status="uploadProgress === 100 ? 'success' : 'active'"
/>
</template>
<style scoped>
.custom-uploader {
max-width: 400px;
}
</style>
玩笑归玩笑，其实这件事被新闻公布出来也给我们前端开发者提了个醒：
平常我们习以为常的 封装组件、处理逻辑、优化体验，其实本质上就是在创造具备技术独创性的资产。
你封装的上传组件、你构建的表单生成器、你提炼的设计系统组件库，都可以被文档化、固化、产品化，甚至 “专利化”！
所以，以后自己在尝试做一些技术性创新的时候，是否也可以琢磨琢磨申请个专利试试？
