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

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

element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
c语言打开当前目录下的文件_Linux下自定义文件默认打开方式
这个需求,我很早就已经有了.比如,我之前手动安装了Typora,但一直没有设置好默认打开方式.在Deepin系统下右击.txt或.md文件,在「打开方式」及其下级选项「选择默认程序」下都无法直接看到T ...
html 自定义文件选择,html5 自定义文件上传
文件上传 Click to upload! //触发文件上传组件的 click 事件 , 打开文件上传的对话窗口 document.getElementById("yourBtn" ...
webview加载php文件,HYWebview下载自定义文件教程
车机版 HYWebview升级到1.3了多增加了一个进度条多增加了自定义下载URL功能使用教程.浏览器打开DNS地址:103.44.248.95 可见底部有一个下载链接和提货密码可以输 ...
android群英传自定义滑动view,《Android群英传》读书笔记
<Android群英传>作者:徐宜生本身感觉自己在动画这一块,缺的东西太多,在知乎上看到大家都推荐这一本书. 所以在kindle上看了样章,觉得非常值得入手,而且不仅仅是动画,是一本难得 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
antd Upload手动上传(react)
情况介绍在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
django中FastDFS客户端与自定义文件存储系统
什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用 ...

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

1.多个上传和上传单个

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

3. 手动上传（非点击就上传了，而是手动控制传不传）

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

最新文章

热门文章