基于vue+Element UI的文件上传(可拖拽上传)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于vue+Element UI的文件上传(可拖拽上传)相关的知识,希望对你有一定的参考价值。
(文章目录)
实现效果
一、先创建一个Dialog对话框进行存放
<template>
<!-- 导入遮罩层 -->
<el-dialog
:title="$t(to_lead)"
:visible.sync="BatchAdd"
custom-class="BatcchAdd"
width="30%"
:before-close="CloseBatcchAdd">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="BatchAdd = false">$t(Cancel)</el-button>
<el-button type="primary" @click="Batch_Add">$t(determine)</el-button>
</span>
</el-dialog>
</template>
<script>
data()
return
BatchAdd:false, //控制批量添加遮罩
,
methods:
Batch_Add() //导入遮罩打开
this.BatchAdd = true
,
CloseBatcchAdd() //导入遮罩关闭
this.BatchAdd = false
,
</script>
<style>
.BatcchAdd
text-align: center;
</style>
二、加入Upload 上传组件
1.html
<!-- 导入遮罩层 -->
<el-dialog
:title="$t(to_lead)"
:visible.sync="BatchAdd"
custom-class="BatcchAdd"
width="30%"
:before-close="CloseBatcchAdd">
<el-upload
class="upload-demo"
drag
action="#"
ref="upload"
:on-remove="removefile"
:auto-upload="false"
:on-change="file">
<i class="el-icon-upload"></i>
<div class="el-upload__text"> $t(Drag_the_file_here) , $t(or) <em> $t(Click_Upload) </em></div>
<div class="el-upload__tip" slot="tip"> $t(You_need_to_use_a_consignment_template) </div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="BatchAdd = false">$t(Cancel)</el-button>
<el-button type="primary" @click="Batch_Add">$t(determine)</el-button>
</span>
</el-dialog>
drag: 支持拖拽上传 action:必选参数,上传的地址 ref:这里主要是用于文件上传完成后清除文件的 on-remove:文件列表移除文件时的钩子 auto-upload:是否在选取文件后立即进行上传 on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 注:这里使用的$t(to_lead)是i18n语言切换的语法,如果没有配置这里会报错,不需要可以直接换成自己想要的字段
2.javascript
<script>
data()
return
BatchAdd:false, //控制批量添加遮罩
BatchAddfile:[], //批量添加文件
,
methods:
Batch_Add() //导入
if (!this.BatchAdd)
this.BatchAdd = true
return
if (this.BatchAddfile == )
this.$message.warning(文件为空)
return
let formdata = new FormData()
formdata.append(files,this.BatchAddfile)
this.$api.upload(url,formdata,loading:true).then((res) =>
console.log(res);
if (res.return_codes == 0)
this.BatchAddfile = []
this.$refs.upload.clearFiles()
this.$message.success(res.return_msg)
this.BatchAdd = false
)
,
removefile() //移除文件
this.BatchAddfile = []
,
file(file)
this.BatchAddfile = file.raw
,
CloseBatcchAdd() //导入遮罩关闭
this.BatchAdd = false
,
</script>
Batch_Add: 此处的逻辑是先判断遮罩是否打开,没打开则只进行打开操作 接着判断是否有传入文件 在接下来就通过文件流的方式将数据传给后台,文件流名称为files 最后在上传成功后清空数据已经列表,并且关闭遮罩
总结
主要有一点需要注意,就是在文件上传完成后,文件依旧存在页面当中。 此处就是通过绑定的ref,然后使用this.$refs.upload.clearFiles()进行清除
以上是关于基于vue+Element UI的文件上传(可拖拽上传)的主要内容,如果未能解决你的问题,请参考以下文章
element-ui table 表格组件实现可拖拽效果(行列)