填坑记 2 - el-upload的上传组件

今天使用element-ui的时候，遇到了一个问题，话不多少，上bug~

看见了不~，我上传了一张图，整出来两张。如果还不明显，看下面的图~

删除了其中一张，两张都没了，发生了什么？？不要急，控制台F12查看我们的代码。报错：

vue.js:634 [Vue warn]: Duplicate keys detected: '1604051065805'. This may cause an update error.

在查找对应的html，发现：

这个ul下面的li个数就是我们上传的图片个数。有没有看到不一样的class名"is-ready"
、
在展开li标签，发现class名为“is-success”li标签里面的img 是我们上传到服务器里面的地址。而“is-ready”里面则是笔者本地的地址。
所以，我们大胆的推测，同时上传一张图片，同时出现两张一模一样的图片的问题，就是这个is-ready引起的。
至于is-ready 在el-upload中是干什么。笔者目前还不清楚，欢迎小伙伴们来解答。
所以，我们把is-ready给隐藏了
`

<style lang="scss">
    .el-upload-list__item{
        &.is-ready {
          display: none;
        } 
     }
</style>

`
然后，在上传图片的时候，果然不会出现上传图片，同时出现两张一模一样的图片的问题了，但是，新的问题又来了，我们的上传效果的动画没了，上传的图片从左边飘过来了~他来了，他飘过来了~...

解决方案如下：
`

<script>
    export default{
        methods:{
            // 自定义上传图片方法
            upLoadImg(){
                // 上传阿里云
                const { url } = await alioss.putBlob(file);
                // 添加图片
                this.form[data.name].push({
                    name:data.name,
                    // uid 修改成随机的字符串。如果没有写uid的话，不会出现这个飘的效果
                    uid:file.uid + Math.round(), 
                    // uid:file.uid,
                    url
                });
            }
        }
    }
</script>

`
最后，完美解决了~

感谢：https://blog.csdn.net/camille... 这篇文章的启示。
感谢文章的作者： Chiandra_Leong

大家如果有更好的方法，欢迎指出~，and 能不能给我一个小小的鼓励，感谢~