vue + elmentPlus upload文件上传列表回显

<el-dialog
      v-model="passVisible"
      :title="rejectVisible ? '填写通过原因' : '填写拒绝原因'"
      width="50%"
      :before-close="handleClose"
      align-center
    >
      <el-input v-model="resons" :rows="2" type="textarea" placeholder="请输入原因" />
      <el-upload
        ref="uploadRef"
        :auto-upload="true"
        v-model:file-list="fileList"
        class="upload-demo mt-20px"
        :http-request="uploadExperienceList"
        :before-upload="beforerUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"//与before-upload同时使用需设置beforeRemove返回ture
        :on-exceed="handleExceed"
        :limit="3"
        multiple
        
      >
        <el-button type="primary">上传附件</el-button>
        <!-- <template #tip>
          <div class="el-upload__tip"> jpg/png files with a size less than 500KB. </div>
        </template> -->
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passVisible = false">取消</el-button>
          <el-button type="success" @click="saveReson"> 确认 </el-button>
        </span>
      </template>
 </el-dialog>

// 上传可用钩子函数
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([])
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确认删除 ${uploadFile.name} ?`).then(
    () => true,
    () => false
  )
}
// 上传文件类限制
const beforerUpload = (file) => {
  let FileExt = file.name.replace(/.+\./, '')
  if (['pdf', 'doc', 'docx', 'xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
    ElMessage({
      message: '请上传.pdf、.doc、.docx、.xls、.xlsx格式的文件',
      type: 'error'
    })
    return false
  } else if (file.size / 1024 / 1024 > 50) {
    ElMessage.error('文件大小不能超过50MB!')
    return false
  }
}
//上传后过滤文件fileList列表
let fileIds: any = ref([])
const uploadExperienceList: any = (param: UploadRequestOptions) => {
  let formData = new FormData()
  formData.append('file', param.file)
  common.uploadFileApi(formData).then((res) => {
    fileList.value.push({ name: param.file.name, ...res[0] })
    fileList.value = fileList.value.filter((item: any) => item.id)
    ElMessage.success('上传成功')
  })
}
//提交后过滤文件列表，列表回显通过控制fileList实现
const saveReson = async () => {
  fileIds.value = fileList.value.map((item: any) => item.id)
    let params = {
      id: idPass.value,
      fileIds: fileIds.value,
      comment: resons.value
    }
    if (rejectVisible.value) {
      apply.pass(params).then(() => {
        ElMessage.success('操作成功')
        getResultData()
        passVisible.value = false
      })
    } else {
      apply.refuse(params).then(() => {
        ElMessage.success('操作成功')
        getResultData()
        passVisible.value = false
      })
    }
}

// 上传文件接口定义
export const uploadFileApi = async (data) => {
  return request.post({
    url: '/api/uploads/files',
    data,
    headersType: 'application/x-www-form-urlencoded multipart/form-data'
  })
}