el-upload文件上传进度条,通过axios实现
<el-uploaddragaction="":http-request="self_upload":limit="1"ref="imgUrl"accept="*"><i class="el-icon-upload"></i>...
·
<el-upload
drag
action=""
:http-request="self_upload"
:limit="1"
ref="imgUrl"
accept="*"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击或文件拖拽到这里上传</div>
</el-upload>
<el-progress :percentage="percent"></el-progress>
2.通过axios实现
self_upload(item) {
let formData = new FormData();
formData.append("file", item.file);
request
.post("/file/upload", formData, {
onUploadProgress: (progressEvent) => {
console.log("进度开始");
let percent =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
console.log(percent);
this.percent=percent;
},
})
.then((res) => {});
}
3.控制台截图。文件小,速度很快,直接进度100。文件很大的话,由于设置了接口请求超时的时间,请求没有结束,就断了连接。
更多推荐
已为社区贡献1条内容
所有评论(0)