this.$refs唤起el-upload组件
<template> <section> <el-button v-if="fileName" type="text" @click="handelReplace" class="l-h-20">重新上传</el-button> <el-upload v-show="!fileName" class="upload-wrap m-r-5" ref="uploadBox" accept=".xlsx, .xls" :format="['xlsx','xls']" :on-format-error="handleFormatError" :before-upload="handelBeforeUpload" :on-remove="handelRemove" :http-request="uploadSectionFile" :show-file-list="false" :limit="1" drag > <div>将文件拖拽至此区域</div> <el-button type="text">上传文件</el-button> </el-upload> </section></template><script>export default { data() { return { uploadURL: 'www.baidu.com', fileName: "", // 文件名 updateData: {} // 入参 }; }, methods: { getExtension(fName) { return /[.]/.exec(fName) ? /[^.]+$/.exec(fName)[0] : undefined; }, handelBeforeUpload(file) { let ext = this.getExtension(file.name); if (ext !== "xls" && ext !== "xlsx") { this.$message.error("请上传execl文件！"); this.fileName = ""; return false; } else { this.fileName = file.name; } }, handelRemove(file, fileList) { this.fileName = ""; this.updateData = {}; }, handleFormatError(file) { this.$message.error("文件格式不正确，请上传.xls,.xlsx文件。"); }, uploadSectionFile(params) { let reader = new FileReader(); reader.readAsDataURL(params.file); reader.onload = async () => { this.updateData = { base64: reader.result.split(",")[1], ticket: "base64" }; let { data, errmsg } = await this.$api.apiUrl( this.updateData ); if (data) { this.$message.success("导入成功"); } else { this.$message.error(errmsg); } }; }, handelReplace() { // 重新上传 this.fileName = ""; this.updateData = {}; if (this.$refs.uploadBox) { this.$refs.uploadBox.clearFiles(); this.$refs.uploadBox.$children[0].$refs.input.click(); } } }};</script>
网友评论