导入/批量签约

直接导入

                <Upload :action="basicUrl + 'admin/member/importSignOrReleaseMember?flag=1'"
                    :on-success = 'batchSigninguploadSuccessed'
                    :on-error = "batchSigninguploadFailed"
                    :on-progress = "batchSigninguploading"
                    :show-upload-list = "false"
                    :headers="uploadHeaders"
                    accept='.xlsx'
                    style='margin-left:20px;display: inline-block;'>
                    <i-button type="primary" >{{$t('batchSigning')}}</i-button>
                </Upload>
_______________________________________________
  import Cookies from 'js-cookie';
  import {CHECKBASICURL} from '@/service/getData';
    data() {
      return {
        ifShowPercentCircle: false,
        basicUrl: CHECKBASICURL,
        uploadHeaders: {'x-auth-token': Cookies.get('token')},
  }
}
________________________________________________
             /* 文件上传时的钩子函数 */
            batchSigninguploading (event, file, fileList) {
                this.ifShowPercentCircle = true;
                this.percentage = file.percentage;
            },
    
            /* 文件上传成功时的钩子函数 */
            batchSigninguploadSuccessed (response, file, fileList) {
                this.ifShowPercentCircle = false;
                this.$Message.success('上传成功');
            },
    
            /* 文件上传失败时的钩子函数 */
            batchSigninguploadFailed (error, file, fileList) {
                this.ifShowPercentCircle = false;
                this.$Message.error('上传失败');
            },

有模态框的导入

______________导入按钮
        <!-- 导入 -->
        <i-button style="margin-left:20px;" @click="importDataModal = true" type="primary">{{$t('lead')}}</i-button>
——————————————导入模态框
    <!-- 导入模态框 -->
    <Modal v-model="importDataModal" width='500' :mask-closable="false" >
      <p slot="header" style="color:#000; text-align:center"><span>{{$t('upload')}}</span></p>
      <div class="flex-cc">
        <Upload
          class="flex-cc"
          :before-upload="handleUpload"
          accept='.xls'
          :action="basicUrl + 'square/manage/uploadExcel?type=0'">
          <i-button type="primary" >{{$t('upload')}}</i-button>
        </Upload>
        <!-- style="line-height:40px;margin-left:20px;"  -->
        <div style="line-height:32px; margin-left:20px; text-decoration: underline;" v-if="file !== null">{{ file.name }}</div>
        <div style="line-height:32px; margin-left:20px; text-decoration: underline;" v-if="file == null">{{$t('list')}} .excl</div>
      </div>
      <!-- 确定 -->
      <Button @click='submitUpload'  type="primary" slot="footer" style=" text-align:center">{{$t('confirm')}}</Button>
    </Modal>



    <!-- 导入成功提示模态框 -->
    <Modal v-model="successModal" width='500' :mask-closable="false" >
      <!-- 提醒 -->
      <p slot="header" style="color:#000; text-align:center"><span>{{$t('remind')}}</span></p>
 
      <h3 class="flex-cc">{{successMessage}}</h3>
      <!-- 确定 -->
      <Button @click='successModal = false'  type="primary" slot="footer" style=" text-align:center">{{$t('confirm')}}</Button>

    </Modal>
————————————————数据绑定及引入
  import { manageUploadExcel, CHECKBASICURL} from '@/service/getData';

        importDataModal: false,//导入数据模态框
        file: null, // 导入的文件
        successMessage: '',//导入成功提示消息
        successModal: false,//导入成功提示模态框
        basicUrl: CHECKBASICURL,


————————————方法
      //确定上传
      submitUpload(){
        // this.file 上传文件的实体
        let formData = new FormData()
        formData.append('file', this.file);
        formData.append('type', 0);
        manageUploadExcel(formData).then(res => {
          // debugger
          if (res.code == 0) {
            this.file = null;
            this.importDataModal = false;
            this.successMessage = res.message;
            this.successModal = true;//导入成功提示模态框
            this.manageTopicSearch();//话题列表及搜索

            this.$Message.success('Success')
          } else {
            this.$Message.error(res.message);
          }
        }).catch(err => {
          this.$Message.error(err);
        });
        console.log(this.file)
      }


      // 将导入的文件存储起来
      handleUpload (file) {
        this.file = file;
        return false;
      },


____________service/getData页面
import { BASEURL } from './http.js';
let urlPathCheck = ''
export const CHECKBASICURL = BASEURL + urlPathCheck;

——————————————https.js
let baseURL = '';
export const BASEURL = axios.defaults.baseURL = baseURL;