2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > upload组件多个文件上传 自定义文件列表显示及手动上传

upload组件多个文件上传 自定义文件列表显示及手动上传

时间:2022-04-19 01:33:36

相关推荐

upload组件多个文件上传 自定义文件列表显示及手动上传

1.多个上传和上传单个

1)由multiple属性来控制

2)保存state时,注意存的List内容即可

//参数uploadProps={name:'file', //接口入参名accept:'.gz', //接受上传的文件类型action:document.location.prot+'//'+location.host+'/apis', //接口urlheaders:{authorization:localStage.getItem('authorization')+'', //请求头(token) },multiple:true, // true 多选,false 单选onchange(info:any){ //上传文件改变时的状态 (上传中、完成、失败都会调用这个函数)//多选let fileList=[...info.fileList];//单选//let fileList=[info.fileList[info.fileList.length-1]];setFileList(fileList);}, beforeUpload(fiel:any){ //上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持boolean | Promise<File> | Upload.LIST_IGNORE//上传之前对文件做限制,比如文件名错误的不上传,在此处做校验},showUploadList:{showRemoveIcon:true},progress:{ //进度条的显示strokeColor:{},format:(precent:any)=>{},}}

2. 自定义文件列表展示位置

1)从beforeUpload直接返回false;

beforeUpload(fiel:any,fileList:any){ setFileList([fileList]);return flse;},

2)fileList,可以用表格展示,可以用另一个upload组件展示,也可以自定义其他方式。即 位置、方式自定义。

3. 手动上传(非点击就上传了,而是手动控制传不传)

1)区别就是不能再使用用组件自带的方式掉接口,需要点击时调接口

2)特别注意上传是需要是form-data的格式。

//手动上传const handleUpload=()=>{const formData=new FormData();fileList.forEach((file)=>{formData.append('file',file); //'file'接口接受的参数});fetch(document.location.prot+'//'+location.host+'/apis',{method:'POST',headers:{authorization:localStage.getItem('authorization')+'', },body:formData,}).then((res)=>{ //处理返回值});}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。