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

37次阅读

共计 978 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完