vue上传进度条

<template>
	进度: {{speeds}}
	<form name="form" method="post" enctype="multipart/form-data">
		<input type="file" name="file" @change="formFile($event)"/><br>
		<input type="button" value="上传" @click="submit()"/>
	</form>
	<!-- <form name="form" action="http://152.136.220.129:8080/course/upCourse" method="post" enctype="multipart/form-data">
		<input type="text" name="cid" value="1" />
		<input type="file" name="file" /><br>
		<input type="submit" value="上传" />
	</form> -->
</template>

<script>
	import axios from 'axios'//引入axios
	import { ref } from 'vue'
	export default {
		controller(){return{"url":"/"}},
		setup() {
			var speeds = ref ("请选择文件")
			return {file:null,speeds}
		},
		methods: {
			formFile(e){
				this.file = e.target.files[0];
			},
			submit(){
				var form = new FormData();
				form.append("cid",1);
				form.append("file",this.file);
				axios.post("http://152.136.220.129:8080/course/upCourse",form,{
					onUploadProgress: (progressEvent) => {
						// this.speeds = progressEvent
						this.speeds = progressEvent.loaded/progressEvent.total*100+"%";
					}
				}).then(() => {
					this.speeds = "上传成功";
				})
			}
		},
	}
</script>