首页 > 其他分享 >AntDesign文件上传前端文件类型控制 不采用Upload.IGNORE来限制出现在upload_list中

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

时间:2024-01-16 15:02:16浏览次数:31  
标签:info name list Upload upload item file pdf uploadFileList

<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} 上传失败!`);
			}
		}

标签:info,name,list,Upload,upload,item,file,pdf,uploadFileList
From: https://www.cnblogs.com/openmind-ink/p/17967659

相关文章

  • delphi firemonkey使用 TListView 自定义列表数据
    设计界面如下把ListView的Item的Appearance为DynamicAppearance,并且把Item改为高度100添加Item代码procedureTForm1.Button1Click(Sender:TObject);varimg:TListItemImage;text1,text2,text3:TListItemText;beginvaritem:=ListView1.Items.Add;text......
  • Encountered fatal error while reloading routing: Routing trace file does not mat
      efinity编译在routersetup时候报错Encounteredfatalerrorwhilereloadingrouting:Routingtracefiledoesnotmatchnetlist(netlistnetcount24888v.tracenetcount0).  解决方案:检查客户工程的PNR页面。beneficialskew页面是否打开,如果是on状态,试......
  • Alist开源网盘搭建
    官网:https://alist.nn.ci/zh/github下载地址:https://github.com/alist-org/alist/releases我使用的版本:v3.29.1我的下载地址:https://wwrp.lanzout.com/iBZcC1l6x8fa1软件下载下载可能相当慢,也可能很快,这个网站时不时能打开,也可能打不开,这里不研究这个2安装使用官网......
  • 【Java 进阶篇】使用 Stream 流和 Lambda 组装复杂父子树形结构(List 集合形式)
    目录前言一、以部门结构为例1.1实体1.2返回VO1.3具体实现1.4效果展示二、以省市县结构为例2.1实体2.2返回VO2.3具体实现2.4效果展示三、文章小结前言在最近的开发中,一星期内遇到了两个类似的需求:返回组装好的部门树、返回组装好的地区信息树,最终都需要返回List集合对象给前端......
  • react native 使用 FlatList 实现单选列表组件
    1.最终效果:2.实现代码:importReact,{useState}from'react';import{FlatList,SafeAreaView,StatusBar,StyleSheet,Text,TouchableOpacity,}from'react-native';constDATA=[{id:'zh_CN',title:&#......
  • [GYCTF2020]Blacklist
    [GYCTF2020]Blacklist打开题目是一个输入框,输入数字可以查看到内容用万能语句可以查看到更多东西使用联合查询发现有过滤,select这些都被过滤了show没有被过滤,所以可以查看相关信息通过师傅们的WP得知,可以用desc查看表结构的详细信息desctable_name;此处desc是describ......
  • PyTorch中的nn.LeakyReLU()、nn.Module和nn.ModuleList
    一.nn.LeakyReLU()函数  在PyTorch中,nn.LeakyReLU()是一个激活函数,用于引入非线性性到神经网络中。LeakyReLU是修正线性单元(ReLU)的一种变体,它在输入为负数时不是完全置零,而是引入一个小的负斜率。nn.LeakyReLU()的初始化参数如下:negative_slope(默认为0.01):负斜率,指定当......
  • delphi firemonkey使用 TListbox 自定义列表数据(二StyleBook方式实现)
    上一篇用设计好界面后用代码添加稍微有些麻烦,所以改为用StyleBook设计好后添加Item界面上添加ListBox后改Item高度为100右键添加一条空白记录,观察高度,并且方便自定义编辑style样式默认添加一条ListBoxItem1Style1的样式,添加Layout布局到这个样式下,并且添加需要的控件进去la......
  • QTcpSocket发送存储QObject的QList
     #include<QTcpSocket>#include<QDataStream>#include<QByteArray>voidsendObjectList(QTcpSocket*socket,constQList<QObject*>&objectList){QByteArrayserializedData;QDataStreamout(&serializedData,QIODev......
  • 使用 TListbox 自定义列表数据(界面显示)
    界面设计如下启动时默认值procedureTForm1.FormCreate(Sender:TObject);begin//启动时隐藏模板Layout1.Visible:=False;//开启隔行变色ListBox1.AlternatingRowBackground:=True;end;Listbox添加Item代码如下procedureTForm1.AddItem(name:string;......