實現(xiàn)效果

一、先創(chuàng)建一個Dialog對話框進(jìn)行存放

<template>
    <!-- 導(dǎo)入遮罩層 -->
    <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(){  //導(dǎo)入遮罩打開
			this.BatchAdd = true
		},
		CloseBatcchAdd(){ //導(dǎo)入遮罩關(guān)閉
      		this.BatchAdd = false
    	},
	}
</script>

<style>
.BatcchAdd{
  text-align: center;
}
</style>

二、加入Upload 上傳組件

1.HTML

    <!-- 導(dǎo)入遮罩層 -->
    <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：必選參數(shù)，上傳的地址
ref：這里主要是用于文件上傳完成后清除文件的
on-remove：文件列表移除文件時的鉤子
auto-upload：是否在選取文件后立即進(jìn)行上傳
on-change：文件狀態(tài)改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調(diào)用
注：這里使用的{{$t(‘to_lead’)}}是i18n語言切換的語法，如果沒有配置這里會報錯，不需要可以直接換成自己想要的字段

2.JavaScript

<script>
	data(){
	    return{
			BatchAdd:false, //控制批量添加遮罩
			BatchAddfile:[],  //批量添加文件
	    }
	  },
	methods:{
    Batch_Add(){  //導(dǎo)入
      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(){ //導(dǎo)入遮罩關(guān)閉
      this.BatchAdd = false
    },
	}
</script>

Batch_Add:
此處的邏輯是先判斷遮罩是否打開，沒打開則只進(jìn)行打開操作
接著判斷是否有傳入文件
在接下來就通過文件流的方式將數(shù)據(jù)傳給后臺，文件流名稱為’files’
最后在上傳成功后清空數(shù)據(jù)已經(jīng)列表，并且關(guān)閉遮罩

總結(jié)

主要有一點需要注意，就是在文件上傳完成后，文件依舊存在頁面當(dāng)中。

此處就是通過綁定的ref，然后使用this.$refs.upload.clearFiles()進(jìn)行清除文章來源地址http://www.zghlxwxcb.cn/news/detail-400144.html

到了這里，關(guān)于基于vue+Element UI的文件上傳（可拖拽上傳）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！