一、Ant Design Vue文件上传功能

文件上传选项框

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

效果：

js实现代码

//定义的变量
<script>
export default {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('Clicked cancel button')this.visible = false},//删除上传文件handleRemove(file) {const index = this.fileList.indexOf(file)const newFileList = this.fileList.slice()newFileList.splice(index, 1)this.fileList = newFileList},//显示上传文件内容beforeUpload(file) {this.spinning = truevar that = thisthat.visible = false//文件类型var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)if (fileName != 'xlsx' && fileName != 'xls') {this.$message.error('文件类型必须是xls或xlsx!')this.spinning = falsethat.visible = truereturn false}//读取文件大小var fileSize = file.size//console.log(fileSize)if (fileSize > 1048576) {this.$message.error('文件大于1M!')this.spinning = falsethat.visible = truereturn false}let fd = new FormData()//表单格式fd.append('file', file)//添加file表单数据let url = this.IpConfig + '/xing/jtGongLuShouFeiZhan/upload'this.$ajax({method: 'post',url: url,data: fd,headers: {'Content-Type':'multipart/form-data;boundary=' + new Date().getTime(),},}).then((rsp) => {console.log(rsp)let resp = 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})return false}}}
</script>

二、Ant Design React文件上传功能

文件上传选项框

render() {const upLoad = {name: 'files',action: 'http://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><div className={styles.tableBtnBox}><Button disabled={this.state.showBtn} type="primary">新建</Button><Button disabled={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}><p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">单击或拖动文件到此区域以上传</p></Dragger>,</Modal></React.Fragment>)}

效果：

2. js实现代码


//点击上传按钮方法onUpload() {this.setState({uploadState: true,})}//文件上传handleChange(info) {var fileSize = info.file.size;if (info.file.status === 'done') {if (info.file.response.code === 500) {message.error('上传文件失败');return}let response = info.file.response.res[0];if (response.suffix == 'xlsx' || response.suffix == 'docx' || response.suffix == 'pdf') {//当文件类型是xlsx，docx，pdf三种格式时let userid = Number(localStorage.getItem('userid'));const baseUrl = 'http://192.168.0.123:8889';const api = '/zhyjxxzhpt/file/upload';let fd = new FormData();//表单格式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=" + new Date().getTime()}}).then(res => {if (res.data.code == 'success') {message.success(`${response.name} 文件上传成功！`);}this.queryPrivate();})} else {message.error(`只能上传xlsx,docx,pdf文件！`);return false}} else if (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,});};

写在最后：上述代码均是自己在开发过程中总结出来，或许还有不足之处，但是希望有些内容能够帮到大家，谢谢观赏！

Ant Design Upload 文件上传功能相关推荐

ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
antd design Upload文件上传，删除，批量上传组件封装
1.单个文件上传组件,无文件时显示上传,有文件时显示文件,可删除,重新上传,样式适合图片上传,可根据文件格式更改样式,效果图如下. 页面调用代码 <FormItem{...formItemLay ...
Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现目录 Upload 常用属性和方法默认上传 customRequest 自定义上传 Upload 自定 ...
Ant Design Vue 文件上传自定义按钮和文件列表位置
采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-uploadname="file"style="float: left;"@change= ...
React开发（267）:ant design upload简单上传
## 如果只是简单的上传,没必要写 customRequest ```javascript<Uploadname="file"action={`${BASE_URL}/com ...
Android 实现文件上传功能(upload)
文件上传在B/S应用中是一种十分常见的功能,那么在Android平台下是否可以实现像B/S那样的文件上传功能呢?答案是肯定的.下面是一个模拟网站程序上传文件的例子.这里只写出了Android部分的 ...
java前后端分离的实现方式_采用前后端分离的方式进行开发，实现了几种常用的文件上传功能...
MyUploader-Backend 单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传简介采用前后端分离的方式进行开发,实现了几种常用的文件上传功能. 前端采用 vue.js + ...
Spring 文件上传功能
本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: 1 2 3 4 5 <dependency> & ...
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...
Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库使用 For ...

Ant Design Upload 文件上传功能

Ant Design （vue，react）Upload文件上传功能

一、Ant Design Vue文件上传功能

二、Ant Design React文件上传功能

Ant Design Upload 文件上传功能相关推荐

最新文章

热门文章