dtcms插件 Mxnet Netty 智慧树 loops oop svg webpack mysqli angular ui router Component GMU vue插件 vue动态绑定class 找公司做网站 react脚手架 nodejs教程视频 纯html网页模板 java通用版qq浏览器下载 java 注解 python学习 python3网络编程 python平方函数 python写脚本 python例子 java入门编程 java编程学习入门 java环境配置 java获取当前线程 java对象序列化 java查看变量类型 php实例教程 垃圾邮件数据集 万能低格工具 vue上传文件 ae脚本管理器 3389扫描器 R语言初学者指南 迅雷会员共享账号 英雄联盟设置
当前位置: 首页 > 学习教程  > 编程语言

Ant Design Upload 文件上传功能

2020/11/24 9:56:05 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

一、Ant Design Vue文件上传功能 文件上传选项框 <a-modaltitle"上传文件":footer"null"//不显示底部按钮:visible"visible"//是否显示:confirmLoading"confirmLoading"//确定按钮 loadingcancel"handleCancel"//取消方…

一、Ant Design Vue文件上传功能

  1. 文件上传选项框
     <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>
    

     

  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 = false
    		      this.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 = true
    		      var that = this
    		      that.visible = false
    		      //文件类型
    		      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
    		      if (fileName != 'xlsx' && fileName != 'xls') {
    		        this.$message.error('文件类型必须是xls或xlsx!')
    		        this.spinning = false
    		        that.visible = true
    		        return false
    		      }
    		      //读取文件大小
    		      var fileSize = file.size
    		      //console.log(fileSize)
    		      if (fileSize > 1048576) {
    		        this.$message.error('文件大于1M!')
    		        this.spinning = false
    		        that.visible = true
    		        return 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.data
    		          if (rsp.status == 200) {
    		            that.fileList = []
    		            that.visible = false
    		            that.confirmLoading = false
    		            that.$message.success('文件上传成功!')
    		            this.spinning = false
    		          } else {
    		            this.$message.error('文件上传失败!')
    		            that.visible = true
    		          }
    		        })
    		        .catch((error) => {
    		          this.$message.error('请求失败! error:' + error)
    		          this.spinning = false
    		          that.visible = true
    		        })
    		      return false
    		    }
    	    }
        }
    </script>
    

     


本文链接: http://www.dtmao.cc/news_show_400190.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?