vue3 文件上传（ElementPlus Upload文件列表点击可下载）

<template>
  <div class="mt-10px">
    <el-upload
      class="upload-demo"
      v-model:file-list="fileLists1"
      multiple
      :show-file-list="true"
      :http-request="jobInformationList"
      :before-upload="beforerUpload"
    >
      <el-button type="">上传附件</el-button>
      <template #file="{ file }">
        <div class="my-10px ml-10px flex justify-between items-center">
          <el-link
            :icon="Document"
            @click="handleDownload(file.id)"
            :underline="false"
            type="info"
            >{{ file.filename }}</el-link
          >
          <div class="cursor-pointer" @click="handleRemove(file, 1)">
            <el-icon><Delete /></el-icon>
          </div>
        </div>
      </template>
    </el-upload>
  </div>
</template>
<script setup lang="ts">
const jobInformationList: any = (param: UploadRequestOptions) => {
  let formData = new FormData()
  formData.append('file', param.file)
  common.uploadFileApi(formData).then((res) => {
    fileLists1.value.push({ name: param.file.name, ...res[0] })
    fileLists1.value = fileLists1.value.filter((item: any) => item.id)
    ElMessage.success('上传成功')
  })
}

const beforerUpload = (file) => {   //校验
  let FileExt = file.name.replace(/.+\./, '')
  if (
    ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'jpeg', 'png'].indexOf(FileExt.toLowerCase()) ===
    -1
  ) {
    ElMessage({
      message: '请上传.pdf、.doc、.docx、.xls、.xlsx、.jpg、.jpeg、.png格式的文件',
      type: 'error'
    })
    return false
  } else if (file.size / 1024 / 1024 > 50) {
    ElMessage.error('文件大小不能超过50MB!')
    return false
  }
}

//下载
const handleDownload = async (id) => {
  common
    .downFile(id)
    .then((res) => {
      let link = document.createElement('a')
      let blogw = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      let objectUrl = window.URL.createObjectURL(blogw)
      link.href = objectUrl
      let disposition = decodeURI(res.headers['content-disposition'])
      let fileName = disposition.substring(disposition.indexOf('filename=') + 9, disposition.length)
      link.download = fileName
      link.click()
      window.URL.revokeObjectURL(objectUrl)
    })
    .catch((err) => {
      ElMessage({
        type: 'warning',
        message: '文件下载失败'
      })
    })
}

//移除
const handleRemove = (file, fileLists) => {
  if (fileLists == 1) {
    fileLists1.value = fileLists1.value.filter((item: any) => item.id != file.id)
  }
}
</script>