el-upload 封裝上傳組件也能申請專利？中石化這波 “基于 vue 的二次封裝” 把我看麻了…
最近刷新聞的時候，看到了一個讓我眼前一亮的標題：中石化申請基于 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`)
returnfalse
}
if (!isTypeValid) {
ElMessage.error(`不支持該文件類型：${file.type}`)
returnfalse
}
returntrue
}
// 上傳進度
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) => {
returnnewPromise((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>玩笑歸玩笑，其實這件事被新聞公布出來也給我們前端開發者提了個醒：
平常我們習以為常的 封裝組件、處理邏輯、優化體驗，其實本質上就是在創造具備技術獨創性的資產。
你封裝的上傳組件、你構建的表單生成器、你提煉的設計系統組件庫，都可以被文檔化、固化、產品化，甚至 “專利化”！
所以，以后自己在嘗試做一些技術性創新的時候，是否也可以琢磨琢磨申請個專利試試？
