Ant Design使用上传组件a-upload的成功回调,并在上传列表上模块中添加dom元素
Ant Design使用上传组件a-upload的成功回调,并在上传列表上模块中添加dom元素描述:如下图所有,由于UI工程师非要要求添加 “上传成功”的标志,而upload 组件不支持slot,小编只能想到操作dom元素来实现这一功能1,关于upload上传成功的回调,由于是使用的action 写的请求地址,官方文档中没有明确给出方法,但小编发现在官方给的handleChange方法中可以获取到
·
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 ;
},
更多推荐


所有评论(0)