Article Directory
achieve effect
First, create a Dialog dialog box for storage
<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>
2. Add the Upload upload component
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: support drag and drop upload
action: required parameter, upload address
ref: here is mainly used to clear the file after the file upload is completed
on-remove: the hook when removing the file from the file list
auto-upload: whether after selecting the file Immediately upload
on-change: the hook when the file status changes, it will be called when the file is added, the upload is successful, and the upload is
failed
. If there is no configuration, an error will be reported here. If you don’t need it, you can directly replace it with the field you want.
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:
The logic here is to first judge whether the mask is open, if not open, only open the operation,
then judge whether there is an incoming file,
and then transfer the data to the background through the file stream, the file stream name is 'files'
Finally, clear the data list after the upload is successful, and close the mask
Summarize
The main thing to note is that after the file is uploaded, the file still exists on the page.
Here is the bound ref, and then use this.$refs.upload.clearFiles() to clear