el-upload上传文件时使用element自带进度条
在使用elementUI中的Upload上传组件进行上传文件时,如果文件较大,往往需要引入进度条来获得刚好的用户体验。而el-upload中已经自带了进度条,所以只需调用这个组件即可。使用axios中的onUploadProgress属性监听上传进度,并将进度反馈给进度条...
·
在使用elementUI中的Upload上传组件进行上传文件时,如果文件较大,往往需要引入进度条来获得刚好的用户体验。而el-upload中已经自带了进度条,所以只需调用这个组件即可。
使用axios中的onUploadProgress属性监听上传进度,并将进度反馈给进度条
let fileFormData = new FormData();
fileFormData.append("file", file.file);
let request = axios.create({
baseURL: "接口地址", // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
// timeout: 20000 // request timeout
})
request({
method: 'POST',
url: '上传文件的接口地址',
data: fileFormData,
// 重点一:complete就是处理后的上传进度数值1-100
onUploadProgress: progressEvent => {
const complete = parseInt(
((progressEvent.loaded / progressEvent.total) * 100) | 0,
10
)
// 重点二:onProgress()方法需要以上方接收的形参来调用
// 这个方法有一个参数"percent",给他进度值 complete 即可
file.onProgress({percent: complete})
}
}).then((res) => {
console.log(res);
if (res.data.status == "success") {
this.$message.success("上传成功!")
} else {
this.$message.error(res.data.data.errMsg)
}
}).catch((err) => {
console.log(err);
this.$message.error("出错了!")
});
},
更多推荐
已为社区贡献3条内容
所有评论(0)