element上传确认统一提交

44 篇文章 0 订阅

<el-form-item label="上传附件:">
  <el-upload
    ref="upload"
    class="upload-demo"
    action=""
    :file-list="fileList"
    :limit="1"
    :auto-upload="false"
    :before-upload="beforeUploadFile"
    :http-request="httpRequest"
  >
    <el-button slot="trigger" size="small" type="primary" :disabled="submitDisable">上传附件</el-button>
    <span slot="tip" class="el-upload__tip ml10">可上传jpg/jpeg/png/pdf/word/excel等格式文件且大小限5M以内</span>
  </el-upload>
</el-form-item>
<el-divider/>
<el-form-item class="tc mt20" label-width="0">
  <el-button type="primary" :disabled="submitDisable" @click="submitForm()">保存</el-button>
</el-form-item>

submitDisable: false,
file: {}

// 上传文件之前的钩子
beforeUploadFile(file) {
  this.submitDisable = true
  const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
  const accord = extension === 'jpg' ||
    extension === 'jpeg' ||
    extension === 'png' ||
    extension === 'pdf' ||
    extension === 'doc' ||
    extension === 'docx' ||
    extension === 'xls' ||
    extension === 'xlsx'
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!accord) {
    this.$message.error('文件格式不正确,请上传.jpg/.jpeg/.png/.pdf/.doc/.docx/.xls/.xlsx文件类型!')
    this.submitDisable = false
  }
  if (!isLt5M) {
    this.$message.error('上传附件大小不能超过5MB!')
    this.submitDisable = false
    return false
  }
  return accord && isLt5M
},
handleRemove(file, fileList) {
  this.submitDisable = false
},
// 自定义的提交函数,取出文件设置进请求参数
httpRequest(param) {
  this.file = {
    file: param.file,
    name: param.name
  }
},
async submitUpload() {
  await this.$refs.upload.submit()
  const formData = new FormData()
  formData.append('file', this.file.file)
  const config = {
    header: {
      Authorization: getToken()
    }
  }
  await axios.post('/api/Minio/UploadFile?folderPath=estate/parkingspace', formData, config)
    .then(res => {
      this.$set(this.ruleForm, 'files', res.data.data.pathName)
    })
},

// 保存
submitForm() {
  this.submitUpload().then(() => {
    this.$refs.ruleForm.validate((valid) => {
      if (valid) {
        this.$emit('submit', this.ruleForm)
      } else {
        return false
      }
    })
  })
},

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值