公司需求是,用户上传文件,可以显示上传成功没,但是没有上传到后台,需要通过自己手动添加一个按钮,只有点击这个按钮后才能把文件传给后端
<el-upload
class="upload-demo"
drag
action=""//接口地址
:limit="1"
:before-upload="beforeupload"
:on-success="uploadTemplatesuccess"
:headers="dataform"
:data="iotDevice"
:disabled="diag"
:auto-upload="false"
:on-change="handleChange"
ref='upload'
>
<i class="el-icon-upload"></i>
<div class="el-upload__text" @click="uploadtext">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
<div class="mt10px">
<el-link type="primary" @click="uploadFile">下载模板</el-link>
<!-- <el-link type="primary"><a href="/tempalte.xlsx">下载模板</a></el-link> -->
</div>
<el-button type="primary" size="mini" @click="fileUp()"
>提交文件</el-button
>
点击上传文件后提交到后台
//文件上传成功提示
uploadTemplatesuccess(res, file) {
console.log(res, file, '文件上传成功')
if (res.status == 0) {
this.$message({
type: 'success',
message: res.msg
})
} else {
this.$message.error(res.msg)
}
},
uploadtext() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.diag = false
} else {
console.log('error submit!!')
return false
}
})
},
fileUp() {
if (this.filetemp.length > 0) {
this.$refs.upload.submit()//重点
} else {
this.$message({
type: 'info',
message: '请先上传附件!'
})
}
},
handleChange(file, filelist) {
console.log(file, filelist, '改变事件-------')
if (file.status === 'ready') {
if (filelist.length > 1) {
filelist.splice(0, 1)
}
this.filetemp = filelist
}
}
这样就完成了自定义上传文件了
下载模板是通过el-link之后绑定个点击事件,再通过window.open打开一个模板地址下载,文章到此结束希望对你有所帮助