el-upload 上传多附件，修改显示原附件

        
                点击上传
        
        
              确认
        

声明：
fileList是回显的，不是存储
fileUPList 是真正带有附件内容的列表

 //定义全局变量，也可以放data里面，这里是vue3
  let fileUPList= []
  let fileList=  []

  function handleRemove(file, fileList) {
    //更新列表
    this.fileList = fileList;
    //针对已经上传的附件进行实时删除
    if(file.id!=null){
      let formData = new FormData();
      formData.append("fileId",file.id)
      axios({
        url: 'team/removeFile',
        method: 'post',
        data: formData
      }).then(res=>{
        if(res.data.code == '200'){
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
        }
      })
    }
  }

  function handleExceed(files, fileList) {
    //this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  }
  function handleFile(file) {
    //formDate.append('file', file.file);
  }
  function beforeAvatarUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 20;
    if (!isLt2M) {
      ElMessage({message: '文件大小不能超过 20MB!', type: 'error',})
    }
    return isLt2M;
  }

  function beforeRemove(file, fileList) {
    //return this.$confirm(`确定移除 ${ file.name }？`);
  }
  function handleChange(file, fileList){
    fileUPList = fileList;
  }

  function distionary(){
    dictQueryList({pDCode:'S_BJZT'}).then((res)=>{
      sBjzts = res.data.data
      show.value = true
    })
  }

//表单提交
const submitUpload = (e) => {
  setTimeout(()=>{
     let formData = new FormData()
      formData.append('sXtgdbh',data.sXtgdbh)
      formData.append('sXtgdzt',data.sXtgdzt)

      fileUPList.forEach(file =>{
        //fileIds受保护的附件 后台处理 not in
        //files 新增的附件
        if(file.id==null){
          formData.append('fileIds', '')
          formData.append('files', file.raw)
        }else {
          formData.append('fileIds', file.id)
          formData.append('files', new File([],""))
        }
      })
      axios({
        url: 'team/upload',
        method: 'post',
        headers: {'Content-Type': 'multipart/form-data'},
        data: formData
      }).then(res=>{
        if(res.data.code == '200'){
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
        }else{
          ElMessage({
            message: '操作失败',
            type: 'error',
          })
        }
      })

  },1000)
}

回显原附件

fileDetail({params:{'id':id}}).then(res=>{
     //[{id:1,name:"附件1.txt",...},{id:2,name:"附件2.txt",...},...]
      fileList = res.data
      fileList.forEach(item=>{
        //新建附件对象
        //item.file 原二进制文件， item.name 附件名称
        let imageFile = new File(item.file, item.name);
        //存储附件对象
        fileUPList.push({raw:imageFile})
      })
    })