<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Document</title>
<style>
.progress{
width:100%;
height:10px;
border:1px solid #ccc;
border-radius: 10px;
}
.point{
/* width:100px; */
height:100%;
background: red;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:auto-upload="false"
ref="upload"
multiple
:limit="3"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="handleExceed"
:on-progress="handleProgress"
:show-file-list="false"
:on-change="onChange"
:http-request="httpRequest"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<el-button size="small" type="primary" @click="submitUpload">开始上传文件</el-button>
<progress-line :progress="data.progress" v-for="data in fileData" />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<template id="count">
<div class="progressLine">
<p>文件进度展示</p>
<div>
<div class="progress">
<div class="point" :style="{width:progress + '%'}" ></div>
</div><span>{{progress}}% </span>
</div>
</div>
</template>
<script>
Vue.component('progress-line',{
template:"#count",
props:{
progress:{
type:Number,
default:30
}
},
})
new Vue({
el:"#app",
data(){
return{
fileList: [],
fileData:new FormData(),
// fileData: new FormData()
}
},
methods:{
startUpload(){
this.$refs.upload.submit()
},
submitUpload(){
this.$refs.upload.submit()
axios.post('https://jsonplaceholder.typicode.com/posts/',this.fileData,{
onUploadProgress: progressEvent => {
let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
console.log('percent',percent)
}
})
},
httpRequest(event){
console.log(event)
this.fileData.append('file',event.file)
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleSuccess(response, file, fileList){
console.log('fileData',this.fileData)
},
handleError(err, file, fileList){
console.log('handleError',err, file, fileList)
},
handleProgress(event, file, fileList){
let index=this.fileData.findIndex(_=>_.uid===file.uid);
if(index+1){
this.fileData[index].progress=Math.floor(event.percent)
}
console.log('this.fileData[index]',this.fileData[index])
},
onChange(file, fileList){
console.log('onChange',file, fileList)
},
beforeUpload(event){
return true;
}
}
})
</script>
</html>