关于vue.js:填坑记-2-elupload的上传组件

明天应用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 能不能给我一个小小的激励，感激~