Ant Design使用上传组件a-upload的成功回调,并在上传列表上模块中添加dom元素
描述:如下图所有,由于UI工程师非要要求添加 “上传成功”的标志,而upload 组件不支持slot,小编只能想到操作dom元素来实现这一功能

在这里插入图片描述

1,关于upload上传成功的回调,由于是使用的action 写的请求地址,官方文档中没有明确给出方法,但小编发现在官方给的handleChange方法中可以获取到回调信息,如下图所有,在参数自己中打印参数,发现在fileList中有response,response即使上传成功的回调
在这里插入图片描述
2,操作dom元素添加标签内容,这里不多说,主要代码如下

 let suc =  document.getElementsByClassName("ant-upload-list-item-name");
        //console.log("274==",suc)
        // let suc =  document.getElementsByClassName("ant-upload-list-item-card-actions");
        if (suc && suc.length>0){
          suc[0].style.width = '60%'
          let parent = suc[0].parentNode
          parent.style.display = 'flex'
          parent.style.marginTop = '16px'
         // console.log('278==parent==',parent)
          let sp = document.createElement("span")
          sp.innerText = '上传成功'
          sp.style.color = '#437FFF'
          parent.insertBefore(sp,suc[0].nextSibling)
        }

其他相关代码如下:

<div class="d-main">
          <div class="a-down">
           <!--<a @click="downLoadMuban">模板下载 <a-icon type="arrow-down" /></a>-->
           <a class="a-title" @click="downLoadMuban">模板下载</a>
          </div>
          <div class="upload-area">
            <a-upload-dragger
              name="file"
              ref="majorUpload"
              :multiple="true"
              :action="majorAction"
              :headers="majorHeaders"
              :before-upload="beforeUpload"
              @change="handleChange"
              :file-list="fileList"
            >
              <!-- :showUploadList="false" -->
              <p class="ant-upload-drag-icon">
               <!-- <a-icon type="inbox" />-->
                <a-icon style="color:#437FFF;font-size: 32px " type="vertical-align-top" />
              </p>
              <p class="ant-upload-text">
                点击或将文件拖拽到这里上传
              </p>
              <p class="ant-upload-hint">
                支持扩展名:.xls .xlsx
              </p>
            </a-upload-dragger>
          </div>
          <div class="self-bottom">
            <span class="self-btn btn-cancel" @click="exportSure">取消</span>
          </div>
        </div>
handleChange (info) {
     console.log("239==",info);
      const file = info.file
      const name = file.name
      const suffix = name.substr(name.lastIndexOf("."));
      if (".xls" != suffix && ".xlsx" != suffix ){
        // this.$message.error('请上传Excel文件!');
        return false;
      }
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
      // console.log("this.fileList==",this.fileList);
      if(this.fileList &&  this.fileList.length>0 && this.fileList[0].response && this.fileList[0].response.code == 0){
        // this.fileList[0].response 执行的回调信息
        let arr = this.fileList[0].response.list || []
        if (arr.length > 0){
          let majorNames = ''
          arr.forEach(item =>{
            if (majorNames) {
              majorNames = majorNames + ','+ item.majorName
            } else {
              majorNames = item.majorName
            }
          })
           this.$message.error(`有${arr.length}条专业未保存成功,专业为:${majorNames}`)
        }
       // console.log(this.$refs.majorUpload)
        let suc =  document.getElementsByClassName("ant-upload-list-item-name");
        //console.log("274==",suc)
        // let suc =  document.getElementsByClassName("ant-upload-list-item-card-actions");
        if (suc && suc.length>0){
          suc[0].style.width = '60%'
          let parent = suc[0].parentNode
          parent.style.display = 'flex'
          parent.style.marginTop = '16px'
         // console.log('278==parent==',parent)
          let sp = document.createElement("span")
          sp.innerText = '上传成功'
          sp.style.color = '#437FFF'
          parent.insertBefore(sp,suc[0].nextSibling)
        }
      }

    },
 // 文件上传
    beforeUpload (file) {
      const name = file.name
      const suffix = name.substr(name.lastIndexOf("."));
      if ('.xls' != suffix && '.xlsx' != suffix ){
        this.$message.error('请上传Excel文件!');
        return false;
      }
      return true ;
    },
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐