1、设置按钮,点击弹出文件上传对话框
<el-button
type="primary"
icon="el-icon-upload2"
@click="handleImport"
>
文件上传
</el-button>
2、上传文件对话框
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
:on-error="handleFileError"
:before-upload="handleBeforeUpload"
:on-change="handChange"
:on-remove="handRemove"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
属性设置:官网地址组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/upload
3、data
data() {
return {
upload: {
// 是否显示弹出层
open: false,
// 是否禁用上传
isUploading: false,
title: "",
// 设置上传的请求头部
headers:,
// 上传的地址,自己设置
url: ,
},
};
},
4、 methods方法
methods: {
/** 导入按钮操作 */
handleImport() {
this.upload.title = "文件上传";
this.upload.open = true;
},
//文件上传之前
handleBeforeUpload(file) {
// 限制文件上传大小
const limit = file.size / 1024 / 1024 < 5;
if (!limit ) {
this.$message.error("上传文件大小不能超过 5MB!");
this.upload.isUploading = false;
return false;
}
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//文件上传错误
handleFileError() {
this.$message.error("文件上传失败");
this.fullScreenLoading?.close();
},
//文件变化
handChange(file, fileList) {
console.log("文件改变")
},
//删除移除
handRemove(file, fileList) {
console.log("文件移除")
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
if (response.code == 200) {
this.msgSuccess("上传成功");
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
}
},
}
4、效果图
扫描二维码关注公众号,回复:
15203321 查看本文章