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

        <el-upload
                      ref="uploadRef"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-exceed="handleExceed"
                      :on-change="handleChange"
                      :http-request="handleFile"
                      :before-upload="beforeAvatarUpload"
                      :file-list="fileList"
                      size=""
                      >
                <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-button @click="submitUpload" color="#1890FF" type="primary">
              确认
        </el-button>

声明:
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})
      })
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容