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

忘是亡心i 2023-02-08 15:55 13阅读 0赞

//子组件
    <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表单 验证的问题 失去焦点 出现提示存在 用户点击取消的时候 应该把这个校验提示 消失