目的是展示进度条:
1
2
| <input type="file" @change="upload_qiniu">
<Progress :percent="load_int" color="green"></Progress>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <script>
export default(
data(){
return {
load_percent: '',
load_int: 0
}
},
methods:{
upload_qiniu:function(e){
// 以下为七牛云上传文件
var file = e.target.files[0];
let param = new FormData;
param.append('file', file, file.name);
alert(file.name)
param.append('token', this.token);
const axios_qiniu = this.axios.create({withCredentials: false});
axios_qiniu({
url: 'http://up-z2.qiniu.com',
method: 'post',
data: param,
timeout: 40000,
// 上传过程中的方法
onUploadProgress:(e)=>{
var complete = (e.loaded / e.total)
// 处理美化
if (complete < 1){}
this.load_percent = (complete * 100).toFixed(2) + '%';
this.load_int = parseInt((complete * 100).toFixed(2));
}
}).then(res=>{
// 手动赋值
this.load_percent = '100%';
this.load_int = 100;
console.log(res.data);
})
},
}
)
</script>
|
这样上传文件后进度条就会前进，在此说明一下这个Progress双标签使用的是heyui。推动进度关键点在于load_percent,它随着上传的进度而动（然而它的值并不是很准），为了防止文件上传完了而进度条还没跑完这一令人无语的现象出现，在文件上传完后将进度条设置为100，这样进度条就可以完美的运行了！！
