Ant Design使用上传组件a-upload的成功回调，并在上传列表上模块中添加dom元素

墨蓝 2022-12-22 12:27 1011阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]

1，关于upload上传成功的回调，由于是使用的action 写的请求地址，官方文档中没有明确给出方法，但小编发现在官方给的handleChange方法中可以获取到回调信息，如下图所有，在参数自己中打印参数，发现在fileList中有response,response即使上传成功的回调  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 1]  
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 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"
                >
                  
                  <p class="ant-upload-drag-icon">
                   
                    <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 ;
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e4ed691aca9742d08ccf7e6b65b48498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/cd5c52063639404b8bf97065acc3df7c.png