別亂封裝，你看出事兒了吧...

今天組裡的小兄弟跟我反饋說之前不知道誰封裝的一个元件，出現了一個非常「詭異」的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>

因為不清楚他在別的地方是否還有特殊應用，所以沒對原邏輯大改。其實直接把 * 符號刪除就行。

原文出處：https://juejin.cn/post/7543212071351009330