vue-element ui 实现视频文件上传

HTML代码:


	
	
	上传视频
	移除
	
	
	

script内data:

data() {
	return {
		preventSumit:false,
		progressFactor:0.96,
		uploadProgress:0,
		headers: {},
		fileList:[]
	}
}

methods方法:

//上传视频
onBeforeUpload(file){
	this.progressFactor = Math.random(1)
	this.preventSumit = true
},
uploadSuccess(response, file, fileList) {
	let { code , data:{picUrlList}, message } = response;
	if(code == 0){
	this.fileList=[{name:picUrlList[0],url:picUrlList[0]}];
	this.uploadProgress = 100
	this.preventSumit = false
	this.temp.videoIntroduce = this.fileList[0].url
	setTimeout(()=>{this.uploadProgress=0},1000)
	}else{
	this.$refs.upload.clearFiles();
	this.$notify({
	title: '失败',
	message: message,
	type: 'error',
	duration: 3000
	});
	this.preventSumit = false
	} 
},
handleRemoveVideo (file) { 
	this.$refs.upload.clearFiles()
	this.fileList = []
	this.temp.videoIntroduce = ''
},
handProgress (file) {
	this.uploadProgress = parseInt(file.percent*this.progressFactor)
},
clearUpload() {
	if (!this.fileList.length) return false;
	this.$refs.upload.clearFiles() 
	this.fileList = []
	this.temp.videoIntroduce = ''
}

你可能感兴趣的:(前端,Vue,vue-element,ui,上传视频)