AntDesign文件上传前端文件类型控制 不采用Upload.IGNORE来限制出现在upload_list中

<a-form-item
label="附件"
:label-col="{ span: 4 }"
:wrapperCol="{ span: 4 }"
:colon="false"
>
<div class="upload">
<a-upload
:fileList="uploadFileList"
name="file"
:multiple="true"
action="/task/attachment/upload"
:headers="headers"
:before-upload="handleBeforeUpload"
@change="handleChange"
method="post"
accept=".doc, .docx, .xls, .xlsx, .pdf"
>
<a-button> <a-icon type="upload" />上传附件</a-button>
</a-upload>
</div>
<div class="description">* 选择本地文件上传(仅支持word、excel、pdf类型文件)</div>
</a-form-item>
handleBeforeUpload(file){
console.log('output-> extName', file.name.split('.')[1])
if(!('doc,docx,xls,xlsx,pdf'.includes(file.name.split('.')[1]))) {
this.$message.warning('仅支持word、excel、pdf类型文件')
return false;
}
return true;
},
handleChange(info) {
this.uploadFileList = [...info.fileList]
if(!('doc,docx,xls,xlsx,pdf'.includes(info.file.name.split('.')[1]))) {
this.uploadFileList = this.uploadFileList.filter(item => {
if(('doc,docx,xls,xlsx,pdf'.includes(item.name.split('.')[1]))) {
return item;
}
})
return
}
if (info.file.status !== 'uploading') {
}
if (info.file.status === 'done') {
console.log('output-> this.uploadFileList::: ★', this.uploadFileList)
this.dataParams.attachments = this.uploadFileList.map(item => item.response.data.id)
// this.dataParams.attachments.push(info.file.response.data.id);
this.$message.success(`${info.file.name} 上传成功!`);
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败!`);
}
}
posted @   Felix_Openmind  阅读(329)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示