实现效果
点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目
实现代码如下
template
<el-dialog
title="导入"
:visible.sync="dialogVisibleUpload"
width="30%"
:close-on-click-modal="false"
>
<h3>批量导入</h3>
<el-form ref="form" class="upload-form" :rules="rules">
<el-form-item label="模板上传" prop="name">
<el-upload
ref="upload"
:action="url"
:auto-upload="false"
:on-remove="handleRemove"
:on-change="handleChange"
:file-list="fileList"
drag
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-form>
<h4>使用说明</h4>
<div class="use-text">
<p>1.每次上传数据条数限制为10000条，超出部分不导入</p>
<p>2.导入不成功的记录会在结果中反馈</p>
<p>3.标题行不会被导入</p>
<p>4.上传成功后，数据将被展示，请确保数据准确</p>
<p>5.上传数据量大小会影响上传时间(大约需要3-5分钟),请耐心等待</p>
</div>
<!-- <span>数据已导入，可能会经过长时间校验，校验完成后会通过系统消息进行通知</span> -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleUpload = false">取 消</el-button>
<el-button class="primary-but" @click="submitUpload">提 交</el-button>
</span>
</el-dialog>
fileList: [],
url: "",
dialogVisibleUpload: false,
handleChange(file, fileList) {
this.fileList = fileList;
},
handleRemove(file, fileList) {
this.fileList = fileList;
},
// 点击按钮触发
async submitUpload() {
if (this.fileList.length < 1) {
this.$message.error("请选择文件传输！");
return;
}
const formData = new FormData();
this.fileList.forEach((item) => {
formData.append("file", item.raw);
});
const { data: res } = await axios.post(this.url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
if (res.code != "200") {
return;
} else {
this.$message.success("导入成功！");
this.dialogVisibleUpload = false;
this.getList();
this.$refs.upload.clearFiles();
}
},
:auto-upload="false"
:on-remove="handleRemove"
:on-change="handleChange"
原文地址:https://blog.csdn.net/weixin_44738844/article/details/131661382
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_21286.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
