Ant Design (vue,react)Upload文件上传功能
一、Ant Design Vue文件上传功能
- 文件上传选项框
<a-modal
title="上传文件"
: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 = false
this.confirmLoading = false
},
//关闭弹框
handleCancel(e) {
//console.log('Clicked cancel button')
this.visible = false
},
//删除上传文件
handleRemove(file) {
const