vue使用element库实现上传文件和下载本地文件

 直接上代码

HTML代码

<el-upload
     class="upload-demo"
     ref="file"
     :action="action"
     name="file"
     :headers="headers"
     accept=".zip, .rar"
     :file-list="fileList"
     :on-exceed="handleExceed"
     :limit="1"
     :on-change="handleChange"
     :auto-upload="false"
     >
    <el-button class="uploadSubmit" type="primary" @click="downloadTemplate">模板下载</el-button>
    <el-button class="uploadSubmit" slot="trigger" type="primary" @click="showSubmit">选取文件</el-button>
     <el-button class="uploadSubmit" v-if="!enabledUploadBtn" type="primary" @click="submitUpload">上传服务器</el-button>
</el-upload>

js代码 

submitUpload () {
        const param = new FormData();
        this.fileList.forEach(
            (val, index) => {
                param.append("file", val.raw);
            }
        );
        axios.post("/vosa-web/record/batchRecord", param)
            .then(responce => {
                console.log(responce);
                let data = responce.data
                //上传成功的处理
                if (data.code === "0") {
                  this.dialogTableVisible = true
                    this.$message.info('上传成功！')
                    this.uploadSuccessList = data.data
                    console.log(this.uploadSuccessList);
                } else { //上传失败的处理
                    this.$message.error(data.msg)
                }
            })
            .catch(error => {
                console.log(error.responce.data.error.message);
            });
    },
    //模板文件下载
    downloadTemplate() {
        // window.open("./template.xlsx", "_blank")
        window.open("./template.zip", "_blank")
    }