el-upload上传文件取消默认直接上传,改为手动上传

el-upload上传文件取消默认直接上传,改为手动上传

html部分
<el-upload
      ref="upload"
      :accept="fileType.join(',')"
      :limit="1"
      :headers="upload.headers"
      :action="upload.url"
      :before-upload="beforeUpload"
      :disabled="upload.isUploading"
      :on-progress="handleFileProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      :data="dataInfo"   //绑定对象 若需要传递多个参数时使用  不需要则去掉
      drag
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip" style="color: red">
        提示:仅允许导入“xls”或“xlsx”格式文件!
      </div>
    </el-upload>
JS部分
import { getToken } from "@/utils/auth";

export default {
  name: "MesDeptProjectMouthWorkingDetail",
  data() {
    return {
        upload: {
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传地址
        url: process.env.VUE_APP_BASE_API + '/importData/upload',
        // 是否更新已经存在的用户数据
        isUploading: false
      },
      dialogVisiblefile: false,
      fileType: ['.xlsx', '.xls'],
      dataInfo: {
        deptId: null,
        yearAndMouth: null
          //不需要设置上传文件的参数 file
      },
    },
     methods:{
          beforeUpload(file) {
              const isExcel = /\.(xls|xlsx)$/.test(file.name);
              if (!isExcel) {
                this.$message.error('上传文件只能是 .xls、.xlsx 格式!');
                return false;
              }
              return true;
            },
            // 文件上传中处理
            handleFileProgress() {
              this.upload.isUploading = true
            },
            // 文件上传成功处理
            handleFileSuccess() {
              this.upload.isUploading = false
              this.$refs.upload.clearFiles()
            },
            // 提交上传文件
            submitUpload() {
              this.dialogVisiblefile = false
              this.$refs.upload.submit()
        	},
     	}
  	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值