element-ui使用tree组件自定义的节点内容中，upload组件的on-success方法为何无法触发？

Question

使用element-ui的tree组件自定义内容时，需要在内容中加入上传图片的功能，因此加入了el-upload组件，但是el-upload组件的on-success/on-change事件无法触发，导致无法进行下一步操作。测试发现before-upload事件是有触发的。
使用的组件版本都是最新的，vuejs是2.5.9，element-ui是2.0.7。

代码如下：

<template>
    <section>
        <el-tree
                :data="typeData"
                :props="defaultProps"
                default-expand-all
                node-key="typeId"
                :expand-on-click-node="false"
                ref="typeTree"
                :render-content="renderContent">
        </el-tree>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                uploadUrl:"https://jsonplaceholder.typicode.com/posts/",
                typeData: [
                    {
                        typeId:1,
                        typeName:'秋裤',
                        children:[
                            {typeId:2,typeName:'长款',imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512634920&di=d1270eaabbd1852f9fc6568bc9e188d7&imgtype=jpg&er=1&src=http%3A%2F%2Fimg008.hc360.cn%2Fk3%2FM01%2FD9%2F8A%2FwKhQx1dx5l-EeqdRAAAAAFdB58g263.jpg'},
                            {typeId:3,typeName:'短款'}
                            ]
                    },
                    {
                        typeId:4,
                        typeName:'球衣',
                        children:[]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'typeName'
                }
            }
        },
        methods: {
            handleUploadSuccess(res, file) {
                console.log(res)

                if(res.rs=='success'){
                    this.$message.success('分类图片上传成功！');
                }else{
                    this.$message.error('分类图片上传失败！');
                }
            },
            beforeUpload(file) {
                console.log(file);
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt5M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('只能上传 jpg/png 文件!');
                }
                if (!isLt5M) {
                    this.$message.error('上传分类图片大小不能超过 5MB!');
                }
                return isJPG && isLt5M;
            },

            renderContent(h, { node, data, store }) {

                return (
                    <div>
                        {node.label}
                        <el-upload
                                style="display:inline-block;margin-left:20px;"
                                action={this.uploadUrl}
                                show-file-list={false}
                                with-credentials={true}
                                on-success={(res,file) => console.log(1)}
                                on-change={(res,file) => console.log(1)}
                                before-upload={this.beforeUpload}
                        >
                            <el-button size="small" type="text" icon="el-icon-circle-plus">添加图片</el-button>
                        </el-upload>
                    </div>

                );
            }
        }
    }

</script>

Answer 1

on-progress 不能用mock, 需要取消对mock的引用

Answer 2

对楼主可能没有用了，给后来者看一下

对于函数返回的组件来说，函数需要在props属性里传递，直接写在组件上是传递不下去的

参考el-upload源码：

例子：可以在工具中看到，props里的success方法传递了下去，而直接写在组件上的remove方法没有传递下去，为默认的空函数

上面只是给出一种写法，可根据需要随意改动

Answer 3

老师你解决了吗？同样的问题。