Ant?Design?Upload文件上传功能怎么实现

今天主机评测网小编给大家分享一下AntDesignUpload文件上传功能怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、Ant Design Vue文件上传功能

1.文件上传选项框

<a-modaltitle="上传文件":footer="null"//不显示底部按钮:visible="visible"//是否显示:confirmLoading="confirmLoading"//确定按钮loading@cancel="handleCancel"//取消方法><a-upload:fileList="fileList"//上传的文件列表:remove="handleRemove"//文件删除方法:beforeUpload="beforeUpload"//上传文件之前的钩子，参数为上传的文件><a-button><a-icontype="upload"/>选择文件</a-button></a-upload></a-modal><divclass="streetAdd"><a-buttontype="primary"icon="plus"@click="engineeringadd()">新增</a-button><a-buttontype="primary"icon="file"@click="showModal()">数据导入</a-button></div>

效果：

2.js实现代码

//定义的变量<script>exportdefault{data(){return{visible:false,confirmLoading:false,fileList:[],IpConfig:this.IpConfig.projectServiceDomain,}},mounted:function(){this.engineeringList()//that.alarmTypes=res.data.res.dictionaryList;},methods:{//点击数据导入按钮所调用的方法showModal(){this.visible=true},//对话框确认方法handleOk(e){this.visible=falsethis.confirmLoading=false},//关闭弹框handleCancel(e){//console.log('Clickedcancelbutton')this.visible=false},//删除上传文件handleRemove(file){constindex=this.fileList.indexOf(file)constnewFileList=this.fileList.slice()newFileList.splice(index,1)this.fileList=newFileList},//显示上传文件内容beforeUpload(file){this.spinning=truevarthat=thisthat.visible=false//文件类型varfileName=file.name.substring(file.name.lastIndexOf('.')+1)if(fileName!='xlsx'&&fileName!='xls'){this.$message.error('文件类型必须是xls或xlsx!')this.spinning=falsethat.visible=truereturnfalse}//读取文件大小varfileSize=file.size//console.log(fileSize)if(fileSize>1048576){this.$message.error('文件大于1M!')this.spinning=falsethat.visible=truereturnfalse}letfd=newFormData()//表单格式fd.append('file',file)//添加file表单数据leturl=this.IpConfig+'/xing/jtGongLuShouFeiZhan/upload'this.$ajax({method:'post',url:url,data:fd,headers:{'Content-Type':'multipart/form-data;boundary='+newDate().getTime(),},}).then((rsp)=>{console.log(rsp)letresp=rsp.dataif(rsp.status==200){that.fileList=[]that.visible=falsethat.confirmLoading=falsethat.$message.success('文件上传成功!')this.spinning=false}else{this.$message.error('文件上传失败!')that.visible=true}}).catch((error)=>{this.$message.error('请求失败!error:'+error)this.spinning=falsethat.visible=true})returnfalse}}}</script>

二、Ant Design React文件上传功能

1.文件上传选项框

render(){constupLoad={name:'files',action:'192.168.0.102:7072/folder/annex/upload',//文件上传地址headers:{authorization:'authorization-text',},onChange:this.handleChange.bind(this),//上传文件改变时的状态showUploadList:false,//是否展示文件列表}const{page,pages,fileType}=this.state;return(<React.Fragment><divclassName={styles.tableBtnBox}><Buttondisabled={this.state.showBtn}type="primary">新建</Button><Buttondisabled={this.state.showBtn}//是否可用onClick={this.onUpload.bind(this)}//点击方法className={styles.uploadBtn}//样式type="primary"ghost>上传</Button></div><Modaltitle="文件上传"visible={this.state.uploadState}//是否显示onOk={this.handleOk.bind(this)}//确认方法onCancel={this.handleCancel.bind(this)}//取消方法><Dragger{...upLoad}><pclassName="ant-upload-drag-icon"><InboxOutlined/></p><pclassName="ant-upload-text">单击或拖动文件到此区域以上传</p></Dragger>,</Modal></React.Fragment>)}

效果：

2. js实现代码

//点击上传按钮方法onUpload(){this.setState({uploadState:true,})}//文件上传handleChange(info){varfileSize=info.file.size;if(info.file.status==='done'){if(info.file.response.code===500){message.error('上传文件失败');return}letresponse=info.file.response.res[0];if(response.suffix=='xlsx'||response.suffix=='docx'||response.suffix=='pdf'){//当文件类型是xlsx，docx，pdf三种格式时letuserid=Number(localStorage.getItem('userid'));constbaseUrl='192.168.0.123:8889';constapi='/zhyjxxzhpt/file/upload';letfd=newFormData();//表单格式fd.append("userid",userid);//添加userid数据fd.append("id",response.id);//添加id数据fd.append("name",response.name);//添加name数据fd.append("suffix",response.suffix);//添加suffix数据fd.append("type",response.type);//添加type数据axios({url:baseUrl+api,//文件数据保存的地址method:"post",data:fd,headers:{"Content-Type":"multipart/form-data;boundary="+newDate().getTime()}}).then(res=>{if(res.data.code=='success'){message.success(`${response.name}文件上传成功！`);}this.queryPrivate();})}else{message.error(`只能上传xlsx,docx,pdf文件！`);returnfalse}}elseif(info.file.status==='error'){if(fileSize>1048576){message.error(`${info.file.name}文件大于1M!`);}else{message.error(`${info.file.name}文件上传失败！`);}}}//点击确定按钮方法handleOk=e=>{this.setState({uploadState:false,});};//取消方法handleCancel=e=>{this.setState({uploadState:false,});};

以上就是“AntDesignUpload文件上传功能怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：js异或运算符怎么使用

下一篇：wordpress数据表结构和字段有哪些

---