el-upload文件导入前弹窗确认；导入文件过程中全局进行加载；向后端导入excel；

关键代码

相关页面代码

<el-upload action="string" :http-request="uploadFile" ref="fileRefs" :on-change="uploadFileCha"
          :limit="1" :show-file-list="false" accept=".xls, .xlsx">
    <el-button type="success" size="mini" @click.stop="beforeUploadFile" v-loading.fullscreen.lock="Fullloading"
               element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">导入</el-button>
</el-upload>

文件导入前进行弹窗确认

// 导入文件前所执行的操作
beforeUploadFile() {
    this.$confirm("确认继续进行导入文件？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        this.$refs['fileRefs'].$refs['upload-inner'].handleClick()
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消导入'
        })
    })
},

当进行上传文件操作后进行全局加载操作

uploadFileCha() {
    this.Fullloading = true
}

向后端导入excel

// 后端导入excel
uploadFile(param) {
   // 清楚所上传的文件列表，防止不能进行二次上传
   this.$refs.fileRefs.clearFiles();
   let _this = this
   const File = param.file
   let formData = new FormData()
   formData.append('file', File)
   $.ajax({
       url: '后端给前端的相关接口信息',
       type: 'POST',
       data: formData,
       dataType: 'JSON',
       // 必须为false，这样才会自动加上正确的ContentType，否则服务器无法识别
       contentType: false,
       // processData必须为false，这样才能避开jQuery对formdata的默认处理，
       // XMLHttpRequest会对formdata进行正确处理
       processData: false,
       async: true,
       success: function(res) {
       		//将全局加载图表消失
       		_this.Fullloading = false
           if(res.result === 'success') {
               _this.$message({
                   type: 'success',
                   message: '数据导入成功！'
               })
           } else {
               _this.$message({
                   type: 'error',
                   message: '数据导入失败！'
               })
           }
       }
   })
},