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

本文链接：https://blog.youkuaiyun.com/Realizee/article/details/123551607

本文介绍了如何在前端开发中控制文件上传的多选模式，自定义文件列表的位置，以及实现手动上传。重点讲解了`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)=>{  //处理返回值
        }
    );

}