别乱封装，你看出事儿了吧...

今天组里小兄弟跟我反馈说之前不知道谁封装的一个组件，出现了一个非常"诡异"的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 '*'
      }
    },
    ...
  }   
}

貌似没啥特别的地方啊？

又翻了翻官方文档，也没发现 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
    }
  }
}

因为不清楚他在别的地方是否还有特殊应用，所以没对原逻辑大改。其实直接把 * 符号删除就行。

咱就说没这么深得了解就别封装，唉，还是那个建议：《# 再说一遍！不要封装组件库！》