其他分享
首页 > 其他分享> > 基于若依的导入 带参数传给后台 :action

基于若依的导入 带参数传给后台 :action

作者:互联网

前端页面

  

前端代码:

  添加导入按钮事件

  

<el-button
     type="info"
     icon="el-icon-upload2"
     size="mini"
     @click="handleImport"
     >导入
</el-button>

 

<!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload
    	ref="upload"
    	:limit="1"
    	accept=".xlsx, .xls"
    	:headers="upload.headers"
    	:action="upload.url + '?distributionId=' + upload.distributionId"
    	:disabled="upload.isUploading"
    	:on-progress="handleFileUploadProgress"
    	:on-success="handleFileSuccess"
    	:auto-upload="false"
    	drag
      >
    	<i class="el-icon-upload"></i>
    	<div class="el-upload__text">
    	  将文件拖到此处,或
    	  <em>点击上传</em>
    	</div>
    	<div class="el-upload__tip" slot="tip">
    	  <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
    	</div>
    	<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
    	<el-button type="primary" @click="submitFileForm">确 定</el-button>
    	<el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

 

// 用户导入参数
upload: {
  // 是否显示弹出层(用户导入)
  open: false,
  // 弹出层标题(用户导入)
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + "/system/user/importData"
},

// 导入模板接口importTemplate
import { importTemplate } from "@/api/system/user";

/** 导入按钮操作 */
handleImport() {
  this.upload.title = "用户导入";
  this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
  importTemplate().then(response => {
	this.download(response.msg);
  });
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
  this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  this.upload.open = false;
  this.upload.isUploading = false;
  this.$refs.upload.clearFiles();
  this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
  this.getList();
},
// 提交上传文件
submitFileForm() {
  this.$refs.upload.submit();
}

 本文参考【https://doc.ruoyi.vip/ruoyi-vue/document/htsc.html#%E5%AF%BC%E5%87%BA%E5%AE%9E%E7%8E%B0%E6%B5%81%E7%A8%8B】

标签:false,upload,导入,action,传给,上传,response,importTemplate
来源: https://www.cnblogs.com/AniMax/p/13997989.html