element ui upload 多个文件一次上传

<!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>