upfile

upfile

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
    <template>
        <el-button size="small" type="primary" @click="add_obj">add</el-button>
        <up-load v-for="item in objList" :key="item.name" v-model="item.name"></up-load>
    </template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

new Vue({
        el:'#app',
        data() {
            return {
                objList:[{name:""}],
            };
        },
        methods: {
            add_obj(){
                this.objList.push({name:""});
            }
        },
        components:{
            upLoad:{
                props:['value'],
                data(){
                    return {name:this.value}
                },
                watch:{
                    name(v){this.$emit('input', v)},
                    value(v){this.name = v}
                },
                template:`<div>
                <el-input v-model="name" readonly></el-input>
                <el-input v-model="age" readonly></el-input>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess4" :on-error="handleError">
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload></div>`,
                methods: {
                    handleAvatarSuccess4(res,file,fileList){
                        this.name = file.name + '上传成功';
                    },
                    handleError(err, file, fileList){
                        this.name = file.name + '上传失败';
                    }
                }
            }
        },
    });