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

本文介绍了如何在前端开发中控制文件上传的多选模式,自定义文件列表的位置,以及实现手动上传。重点讲解了`multiple`属性的应用,文件列表的存储与处理,以及如何通过`beforeUpload`钩子控制上传流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)=>{  //处理返回值
        }
    );

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值