iview 文件上传 （清除已上传文件方法）

<template>
    <div class="inpopus" @click="bgClickClose">
        <div class="ip_con">
            <div class="ip_con_t">
                {{upload_list.title}}
                <div class="ip_con_close" @click="close"><img src="./close.png"/></div>
            </div>
            <div class="ip_in">
                <div class="ip_in_item" v-for="item in upload_list.list" v-bind:key="item.key">
                    <label>{{item.title}}:</label>
                    <!--  上传 -->
                    <template v-if="item.type=='file'">
                        <Upload ref="upload" :accept="item.childType" :action="uploadApi" :name="item.field" :on-success="uploadSuccess"
                            :before-upload="brforeUpload" :on-progress="onUpload">
                            <Button icon="ios-cloud-upload-outline" style="width:340px;">请选择文件(每个标题对应一张图片,请不要重复选择)</Button>
                        </Upload>
                    </template>
                    <!-- 输入框 -->
                    <template v-else>
                        <Input v-model="item.model" :type="item.type" v-bind:placeholder="item.placeholder" style="width: 340px" />
                    </template>
                </div>
            </div>
            <div class="ip_btn">
                <button  @click="ip_btn()" class="ip_btn_item">保存</button>  
            </div>
        </div>
    </div>
</template>
<script>
import API from '../../util/api'
export default {
    name:"inpopus",
    props:{ upload_list:{} },
    data(){
        return{
            uploadApi:API.uploadfile, // 文件上传地址
            file:'', // 上传的文件名
        }
    },
    methods:{
        bgClickClose(){ //点击背景
            if(event.currentTarget == event.target)
                this.$emit('close');
        },
        close(){ // 关闭
            this.$emit('close');
        },
        ip_btn(type){ // 提交信息
            console.log(this.$props.component_list);
            var data = {};
            for (const iterator of this.$props.upload_list.list) {
                if( iterator.require && iterator.model.length == 0 ){ //iterator.require 检查必填项 
                    this.$Message.error('请输入'+iterator.title);
                    return false;
                }
                data[iterator.field] = iterator.model;
            }
            this.$emit('submitInfo',{type:type,data:data});
        },
        brforeUpload(file){ // 文件上传之前的钩子 

            // console.log(file);
            // console.log(this.$refs);
            // return false;
            // this.$refs.uploadFile.clearFiles()
            const mainImg = this.$refs.upload; // 如果已经有文件  侧删除列表中的文件
            if (mainImg && mainImg.length) { 
                mainImg.forEach(item => {
                // item.uploadFiles.length = 0;
                item.clearFiles();
                });
            }
        },
        onUpload(){ // 文件正在上传
            
            // this.$refs.uploadFile.clearFiles();
        },
        uploadSuccess(response, file, fileList){ // 图片上传成功
            console.log(response,file,fileList);
        },
    },
}
</script>
<style scoped lang='less'>
    .inpopus{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 999;
        .ip_con{
            margin: auto;
            width: 36%;
            min-width: 500px;
            background: white;
            margin-top: 14%;
            position: relative;
            .ip_con_t{
                background: #446be8;
                font-size: 18px;
                color: white;
                text-align: center;
                height: 42px;
                line-height: 42px;
                letter-spacing: 1px;
            }
            .ip_con_close{
                width: 24px;
                height: 24px;
                background: white;
                line-height: 0;
                border-radius: 50%;
                cursor: pointer;
                position: absolute;
                right: 15px;
                top: 9px;
                img{
                    width: 18px;
                    margin-top: 3px;
                }
            }
            .ip_in{
                text-align: center;
                padding: 15px 0 20px 0;
                .ip_in_item{
                    padding: 10px 0;
                    label{
                        color: #999;
                        margin-right: 10px;
                    }
                }
            }
            .ip_btn{
                text-align: center;
                padding-bottom: 20px;
                .ip_btn_item{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    margin-right: 20px;
                    border: none;
                    color: white;
                    background: #4c87ed;
                    border-radius: 4px;
                    cursor: pointer;
                    outline: none;
                    margin-top: 15px;
                }
            }
        }
    }
    .ivu-upload{
        display: inline-block;
        vertical-align: top;
        margin-top: -8px;
    }
</style>