账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui使用tree组件自定义的节点内容中,upload组件的on-success方法为何无法触发?
    83
    0

    使用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>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 珠蒋蒋 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部