一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

前言

最近项目需要上传图片，然后饿了么上面有封装好的上传组件，el-upload。然后我就用它来上传图片。这篇文章总结下使用el-upload上传组件遇到的问题。

问题

el-upload的file-list

el-upload是支持传入file-list的，数组类型，每一项需要有url地址，代表的是已上传的列表。

但是如果你之后再上传图片，el-upload默认是不会更新file-list列表的，而是需要你在上传成功后手动更新。

手动更新就手动更新，问题不大，于是我就在上传成功把上传成功图片的地址push到file-list中。

   <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
    >
      <i class="el-icon-plus"></i>
   </el-upload>
   export default {
       data () {
         return {
           fileList: [{ url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }]
         }
       }, 
       methods: {
        handleRemove (file, fileList) {
          console.log(file, fileList);
        },
        handleSuccess (res, file) {
          this.fileList.push({
            url: file.url
          })
        }
    }

但是就遇到了下面动画过渡问题。

el-upload 动画过渡问题

上传的时候，图片总是会闪动，左右摇摆，然后才正常，过渡的动画有问题。 然后去网上也搜了。发现也有讨论这个问题的issues。

主要是因为el-upload是用uid做上传列表遍历的key。然后transition-group动画是根据key来的。如果操作了fileList，没有传入uid，导致el-upload的uid重新生成，导致动画过渡有问题。

源码如下：

所以如果你对fileList操作的时候，你需要对传入的数据要加上uid，可以从file参数上获取uid，然后传入fileList。

代码如下：

handleSuccess (res, file) {
  this.fileList.push({
    uid: file.uid,
    url: file.url
  })
}

这样子过渡动画就正常了。

el-upload 删除图片

还有一个问题， el-upload删除图片的动画很慢，我切换tab要显示另外的图片，但是它的删除动画还没结束，就会导致，传入的图片和删除的图片在一起，就会导致过渡很突兀。