标签:multiple size port and 小图标 文件上传进度 success form bsp
<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
:multiple="false"
action="void"
:http-request="customUpload"
:on-remove="handleRemove"
:on-progress="progressA"
:file-list="fileList"
multiple
:auto-upload="true">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
}
},
components: {},
mounted() {
},
methods: {
customUpload(file) {
let FormDatas = new FormData();
FormDatas.append(‘file‘, file.file);
this.$axios({
url: ‘http://192.168.1.5:8889/upload‘,
method: ‘post‘,
data: FormDatas,
//上传进度
onUploadProgress: (progressEvent) => {
let num = progressEvent.loaded / progressEvent.total * 100 | 0; //百分比
file.onProgress({percent: num}) //进度条
}
}).then(data => {
file.onSuccess(); //上传成功(打钩的小图标)
})
},
/** 文件正在上传时的钩子 **/
progressA(event, file) {},
/** 移除上传文件 **/
handleRemove(file) {
this.$refs.upload.abort(); //取消上传
this.$message({message: ‘成功移除‘ + file.name, type: ‘success‘});
},
},
}
</script>
<style>
</style>
element el-upload自定义上传显示进度条,多文件上传进度
标签:multiple size port and 小图标 文件上传进度 success form bsp
原文地址:https://www.cnblogs.com/ygunoil/p/12468816.html