需求分析:点击按钮会弹出一个弹框,弹框中有两个按钮,点击下载按钮进行下载,点击上传按钮进行文件上传。
ps:功能看着可能有点多 ,其实分析一下很简单,首先 点击按钮弹出弹框,在弹框中有一个按钮和一个upload组件,点击下载按钮则关闭弹窗调用方法进行下载,点击上传则走upload组件的功能。
template
<el-button
class="elbutton"
style="width:100%"
type="primary"
@click="uploadpz"
>点击</el-button>
<el-dialog
title="上传或下载"
:close-on-click-modal="false"
:visible.sync="uploa"
width="30%"
>
<el-form>
<el-form-item id="upload_action2">
<el-button @click="dcDataXz" style="float: left;margin-top: 5px;margin-right: 10px;">下载</el-button>
<el-upload
class="upload"
:action="action2"
multiple
:headers="headers"
ref="upload"
accept=".csv, .xlsx, .xls"
:on-success="onsuccess"
:on-error="onerror"
:before-upload="beforupload2"
name="file"
:limit="1"
:show-file-list="false"
>
<el-button class="elbutton" type="success" @click="uploa = false">上传</el-button>
</el-upload>
</el-form-item>
</el-form>
</el-dialog>
methods
uploadpz() {
if ((this.paramConfig.task_ID = "0")) {
this.uploa = true;
}
},
dcDataXz() {
if (this.paramConfig.task_ID = "0") {
this.uploa = false;
window.location.href = this.paramConfig.httpPath + "FileUtil/download2";
}
},