今天組裡的小兄弟跟我反饋說之前不知道誰封裝的一个元件，出現了一個非常「詭異」的BUG。
這是一個上傳元件，BUG現象是如果設置了 accept 拖拽檔案是可以正常上傳的，但是不設置的話拖拽檔案上傳不了。
上來就給我弄懵了，一般不都是加限制會導致功能異常嗎？這怎麼反過來了。
詳細看了看封裝的程式碼：
<template>
<el-upload
class="upload-wrap"
drag
...
:accept="accept"
...
>
<i class="el-icon-upload" />
<div class="el-upload__text">將檔案拖到此處，<em>點擊上傳</em></div>
</el-upload>
</template>
<script>
export default {
name: 'Upload',
props: {
...
// 檔案上傳類型
accept: {
type: String,
default: () => {
return '*'
}
},
...
}
}
</script>貌似沒啥特別的地方啊？
又翻了翻官方文件，也沒發現 accept 和 drag 屬性有啥聯繫啊？
一番嘗試之後終於鎖定了問題，如果不加 accept 則默認參數為 *。而在檔案類型限制這裡，* 符號是存在兼容性問題的。
修改方案為：
<template>
<el-upload
drag
...
:accept="computedAccept"
...
>
<i class="el-icon-upload" />
<div class="el-upload__text">將檔案拖到此處，<em>點擊上傳</em></div>
</el-upload>
</template>
<script>
export default {
name: 'Upload',
props: {
...
// 檔案上傳類型
accept: {
type: String,
default: () => {
return '*'
}
},
...
},
computed: {
computedAccept() {
return this.accept === '*' ? '' : this.accept
}
}
}
</script>因為不清楚他在別的地方是否還有特殊應用，所以沒對原邏輯大改。其實直接把 * 符號刪除就行。
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章