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} 上传失败!`); } }
学而不思则罔,思而不学则殆!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具