一、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-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>

效果：

2. 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文件上传功能

1. 文件上传选项框

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,});};

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