elmentPLus upload自定义上传文件 上传成功后文件列表后面需要调用onSuccess()才有绿色对勾

在这里插入图片描述

const uploadFile = (param)=> {
    // 上传新文件时,将进度条值置为零
    // progressPercent.value = 0

  console.log(param,'param')
  const file = param.file
  let type = file.name.split(".").slice(-1)[0].toLowerCase()
  let fileName = file.name.split(".").slice(0,1).toString()
  
  // 判断文件是否读取完毕,读取完毕后执行
  if (window.FileReader) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = async function(e) {
      let base64String = e.target.result;
      // console.log("bese64编码:", base64String);
      reportData.value.file = base64String
      reportData.value.extName = type
      reportData.value.fileName = fileName
      reportData.value.createTime = file.lastModifiedDate
      reportData.value.type = '送审报告'
      reportData.value.uploadUserID = getItem('userInfo')[0].fID 
      reportData.value.reportID = reportID.value
      
      console.log(reportData.value,'reportData.value')
      if(reportData.value.file){
        // 上传送审报告附件
        // const res1 = await 
        AddAttachment(reportData.value).then(res=>{
          console.log(res,'resresresres')
          param.onSuccess(res)
        }).catch(rej=>{
          console.log(rej,'rejrej')
          param.onError(rej)
        })
        // if(res1.code == 200){          
        //   succesMsg('上传成功')
        // }
      }

    }
  }
}
// 上传成功后的钩子
const uploadSuccess = (response,fileList, row) =>{
  console.log(response,fileList, row,'lllllll')
  succesMsg('文件上传成功')
}
// 上传失败后的钩子
const uploadError = (rej) =>{
  warnMsg('文件上传失败',rej)
}
<el-col :span="12" >
        <el-form-item label="送审报告" prop="submittedReport" >
          <el-upload  ref="uploadSubmittedReport" :disabled="isDetail" :file-list="submittedReportFileList" :on-change="handleChanges" :on-preview="handlePreview" :before-remove="beforeRemove" class="upload-demo" :http-request="uploadFile" action="#" :auto-upload="true" 
            :multiple="false" :accept="acceptFileType" :on-success="(response, file, fileList) => {uploadSuccess(fileList, row)}" :on-error="uploadError"
            >
         
              <el-button type="primary" :disabled="isDetail">选择文件</el-button>
                <template #tip>
                  <span class="el-upload__tip">
                    最大10M/</span>
                </template>
          </el-upload>
        </el-form-item>
      </el-col>

我就是这样实现的,做个笔记以免忘记,如有错误代码请大佬指出

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值