对于iview框架的上传文件(上传到阿里)进行改进(上传大小到无限 不经过后台)

//子组件
<template>
    <div>
        <div style="display: flex;">
            <Input :value="currentValue" type="text" clearable  placeholder="请输入视频链接" />
            <div class="upload ivu-upload" @click="clikcssfd">
                <div class="ivu-upload ivu-upload-select">
                <input ref="input" @change="doUpload"  type="file" accept=".mp4,  .mov, .3gp" class="ivu-upload-input"> 
                <button type="button" class="ivu-btn ivu-btn-default">
                <i class="ivu-icon ivu-icon-ios-cloud-upload-outline"></i> 
                <span>上传视频</span>
                </button>
                </div>
            </div>
        </div>
        <Progress class="progress_tx" :percent="percentage" status="normal" :text-inside="false" :stroke-width="5"/>
    </div>
</template>
<script>
//ali-oss 依赖自己补
import OSS from 'ali-oss';
export default {
    name:'upload',
    props:{
        currentValue:String
    },
    data(){
        return {
            percentage:0,
            region: 'oss-cn-beijing',
            bucket:"",
            endpoint:'aliyuncs.com/',
            fileName:'',
            url:'',
            urls:[],
            icon:'ios-cloud-upload-outline',
            disabled:false,
            size:12,
            loading:false,
        }
    },
    methods:{
        clikcssfd(){
            console.log(123)
            this.$refs.input.click();
        },
        doUpload(e){
            console.log(1233)
            const _this = this;
            const urls = [];
            //请求后台的接口 返回 token值等参数 
            this.getRequest('/oss/token')
            .then((result) => {
                _this.bucket = result.result.bucketName
                const client = new OSS({
                    region: _this.region,
                    accessKeyId: result.result.accessKeyId,
                    accessKeySecret:result.result.accessKeySecret,
                    stsToken: result.result.securityToken,
                    bucket: _this.bucket
                })
                _this.percentage = 0;
                    // console.log(files.files)
                    const fileLen =  e.target.files
                    console.log(fileLen)
                    let lastName= fileLen[0].name.split('.')[1]
                    let resultUpload = ''
                    const file = fileLen[0]
                    let random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + lastName
                    client.multipartUpload(random_name, file, {
                        progress: function(percentage) {
                        // 上传进度
                            _this.percentage = parseInt(percentage*100)
                        }
                    })
                    .then((results) => {
                    // 上传完成
                        console.log(results)
                        _this.fileName = results.name
                        _this.showFileName = results.name
                        // this.$emit("getFile",_this.fileName)
                        const url = 'http://'+_this.bucket+'.'+_this.region+'.'+ _this.endpoint+ results.name; 
                        _this.url = url; 
                        // _this.currentValue=url
                        _this.$emit("getFile",_this.url)
                        this.$refs.input.value = null;
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                // }
            })
            .catch(err=>{
                console.log(err)
            })
        },
        random_string(len) { 　　// 随机生成文件名 
            len = len || 32; 　　
            var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 　　
            var maxPos = chars.length; 　　
            var pwd = ''; 　　
            for (let i = 0; i < len; i++) { 　　
                pwd += chars.charAt(Math.floor(Math.random() * maxPos)); 
            } 
            return pwd; 
        } 
    }, 
    watch:{ 
        url(val){ 
            if(val){ 
                this.urls.push(val); 
            } 
        },
        currentValue(val){
            this.$emit("getFile",val)
        }
    }
}
</script>

父组件
<FormItem label="视频" prop="resourcesUrl">
	<upload v-on:getFile="getFiles" :currentValue="formadd.resourcesUrl"></upload>
</FormItem>
import upload from "@/views/upload"
export default{
	components:{
		upload 
	},
	data(){
		return{
			formadd:{
				resourcesUrl:''
			}
		}	
	},
	methods:{
		// 上传视频
      getFiles(text){
        this.formadd.resourcesUrl=text
      }
	}
}

存在的问题: 对于Form表单 验证的问题 失去焦点 出现提示存在 用户点击取消的时候 应该把这个校验提示 消失