摘要：公司有个Vue3项目，里面的Element-Plus组件库版本是1.0.2-beta.53。昨天因为要解决一些问题升级了版本库，结果导致一系列的坑随之而来。今天要说的就是upload上传组件受到了影响。

最近在优化项目，然后不停掉坑中，被Element-Plus这个组件库气的要吐血！

今天要说的这个问题，已经坑了我一天多了。同样的组件，同样的功能，在一个项目中就能监听到，在另一个项目中就异常。最后发现原来是Element-Plus版本的问题！艹！

一、坑一：upload上传组件中插槽file的坑

在这个Vue3项目中，前同事@徐大大在开发时安装的Element-Plus版本是1.0.2-beta.53。

昨天我去Element-Plus官网看了下版本，发现最新版本是2.2.16，2022-09-02号发布的。果断地升级到了最新版本，然后就出现了一系列的坑。

1.1、升级前功能还正常

<!-- 友情提示：因编码原因，文章中的双括号{}均做了转码处理，复制后需要替换成英文状态下的{ }才能运行 -->
<template>
  <div>
    <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :file-list="fileList"
      :auto-upload="false"
    >
      <template #file="file">
      file=={{ file }​}
      <span class="el-upload-list__item-ready" v-if="file.status === 'ready'">待上传</span>
      ...... 此处省略一些代码
      </template>
    </el-upload>
  </div>
</template>

上面是一个upload上传组件，用到了插槽功能→→#file="file"。这种写法在1.0.2-beta.53版本时，能正常运行。当我升级到最新版后，就不行了。

升级后我打印了file的值，结果如下↓↓↓

file=={ "file": { "name": "90.jpg", "percentage": 0, "status": "ready", "size": 362345, "raw": "[object File]", "uid": 1662540199125 } }

现在file的结果中还有一个file，这就尴尬了。如果改原来的代码，需要改动多处，还不保证有没有隐藏的bug。

后来百度了下，找到了解决方案。

1.2、解决方案：{file}

<!-- 高版本时，具体哪一版发生的变化就不太清楚了 ↓↓↓ -->
<template #file="{file}">

现在再选择图片上传，页面中的file.status可直接取到值，成功解决问题。

二、坑二：2.2.9+版本，watch中无法监听list-type(文件列表)

解决了前面的问题后，在上传图片时又遇到了新问题。watch监听失效了。。。。。。

此处坑了我一天！省略若干心理活动。

经测试发现，Element-Plus组件库升级到2.2.9+以上版本时，在watch中无法直接监听list-type，需要改写成v-model:file-list才能监听。相关代码如下↓↓↓

2.1、2.2.9版本时，watch监听正常

<!-- 友情提示：因编码原因，文章中的双括号{}均做了转码处理，复制后需要替换成英文状态下的{ }才能运行 -->
<template>
  <div>
    <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :file-list="fileList"
      :auto-upload="false"
    >
      <template #trigger>
        <el-button ref="triggerRef" type="primary">select file</el-button>
      </template>
      <template #file="{ file }"> file=={{ file }​} </template>
    </el-upload>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  watch: {
    fileList: {
      handler(val) {
        console.log('watch file-list', val, Date.now()) // 2.2.9+版本，不会触发
      },
      deep: true,
      immediate: true,
    },
  },
  setup() {
    const fileList = ref([])
    return {
      fileList,
    }
  },
}
</script>

<style lang="scss" scoped></style>

就是上面这段代码，如果Element-Plus版本库不超过2.2.10，点击按钮选择图片后，控制台就能正常打印信息。效果图如下↓↓↓

升级后就不行了。

我又跑到Element-Plus官网上看了下日志，发现在2.2.10中有一个跟upload相关的bug。如图↓↓↓

2.2、2.2.9+版本时，使用v-model:可让watch监听生效

<!-- 修改前（2.2.9版本）↓↓↓ -->
:file-list="fileList"

<!-- 修改后（2.2.9+）↓↓↓ -->
v-model:file-list="fileList"

现在，即使是升级到目前最高版2.2.16，选择图片后，watch中也能监听到fileList的值变化了。

三、最后

啥也不说了，继续去改别的bug去了。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2022-09-07/vue3-element-plus-upload.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。