Ant Design Upload 文件上传功能

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

     

上一篇:角色模板前端


下一篇:webview 输入法高度不一致呼出后切换卡死