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

前端路上迷茫的小鲨鱼

已于 2024-05-15 17:14:25 修改

阅读量594

点赞数 4

文章标签： vue.js elementui javascript

于 2024-05-11 12:37:34 首次发布

本文链接：https://blog.csdn.net/guoyu1_/article/details/138710175

版权

<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)
}