element-plus表单上传,只能上传一个文件,第二个覆盖前一个文件并校验,封装方法统一管理

<el-form
  ref="ruleFormRef"
  :model="ruleForm"
  :rules="rules"
  label-width="110px"
>
  <el-form-item label="语言成绩材料" prop="languageList">
    <div class="dis-flex w100">
      <el-upload
        ref="upload1"
        v-model:file-list="ruleForm.languageList"
        class="upload-demo w100"
        :action="imageUrl"
        multiple
        :limit="1"
        :before-upload="beforeFileUpload"
        :on-exceed="(file, filesList) => handleExceed(file, filesList, 'languageList', upload1, true)"
        :on-success="$event=>uploadFileSuccess($event, 'languageList', true)"
      >
        <div class="primary-btn w100">
          <i-ep-Upload class="mr5" />
          <span class="f12">点击上传(仅限PDF)</span>
        </div>
      </el-upload>
    </div>
  </el-form-item>
  <el-form-item label="主课offer" prop="mainOffer">
    <div class="dis-flex w100">
      <el-upload
        ref="upload2"
        v-model:file-list="ruleForm.mainOffer"
        class="upload-demo w100"
        :action="imageUrl"
        multiple
        :limit="1"
        :before-upload="beforeFileUpload"
        :on-exceed="(file, filesList) => handleExceed(file, filesList, 'mainOffer', upload2, true)"
        :on-success="$event=>uploadFileSuccess($event, 'mainOffer', true)"
      >
        <div class="primary-btn w100">
          <i-ep-Upload class="mr5" />
          <span class="f12">点击上传(仅限PDF)</span>
        </div>
      </el-upload>
    </div>
  </el-form-item>
  <el-form-item label="护照">
    <div class="dis-flex w100">
      <el-upload
        ref="upload3"
        v-model:file-list="ruleForm.passport"
        class="upload-demo w100"
        :action="imageUrl"
        multiple
        :limit="1"
        :before-upload="beforeFileUpload"
        :on-exceed="(file, filesList) => handleExceed(file, filesList, 'passport', upload3)"
        :on-success="$event=>uploadFileSuccess($event, 'passport')"
      >
        <div class="primary-btn w100">
          <i-ep-Upload class="mr5" />
          <span class="f12">点击上传(仅限PDF)</span>
        </div>
      </el-upload>
    </div>
  </el-form-item>
</el-form>


const VITE_APP_BASE_API = import.meta.env.VITE_APP_BASE_API
const imageUrl = VITE_APP_BASE_API + '/api/Oss/UploadFile'

const ruleFormRef = ref()
const ruleForm = ref({
  languageList: [],
  mainOffer: [],
  passport: []
})
const rules = reactive({
  languageList: [
    { required: true, message: '请选择上传语言成绩材料', trigger: 'change' }
  ],
  mainOffer: [
    { required: true, message: '请选择上传主课offer', trigger: 'change' }
  ]
})


const upload1 = ref()
const upload2 = ref()
const upload3 = ref()
// 覆盖前一个文件
const handleExceed = (files, fileList, name, uploadInstance, validateField = false) => {
  uploadInstance.clearFiles()
  ruleForm.value[name] = [{
    name: fileList[0].name,
    url: fileList[0].url
  }]
  uploadInstance.handleStart(files[0]) // 手动选择文件
  uploadInstance.submit() // 手动上传
  validateField && ruleFormRef.value.validateField(name)
}
// 上传成功
function uploadFileSuccess(res, name, validateField = false) {
  ruleForm.value[name] = [{
    name: res.name,
    url: res.file_url
  }]
  validateField && ruleFormRef.value.validateField(name)
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值