1.多个上传和上传单个
1)由 multiple属性 来控制
2)保存state时,注意存的List内容即可
//参数
uploadProps={
name:'file', //接口入参名
accept:'.gz', //接受上传的文件类型
action:document.location.prot+'//'+location.host+'/apis', //接口url
headers:{
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)=>{ //处理返回值
}
);
}