首页 > 其他分享 >iview upload组件 上传 vue2 写法备份

iview upload组件 上传 vue2 写法备份

时间:2024-12-27 16:54:42浏览次数:5  
标签:vue2 debounce upload timer file res Message 上传 iview

  <Upload
          :action="urlDoMain + 'middle/bla'"
          :headers="{
            'Current-id': accountId,
            'Current-name': account,
          }"
          :format="['xlsx','xls']"
          accept=".xlsx,.xls"
          :multiple="false"
          :data="uploadData"
          :show-upload-list="false"
          :before-upload="handleBeforeUpload"
          :on-format-error="handleFormatError"
          :on-success="handleSuccess"
          style="display: inline-block; ">
        <i-Button type="primary" >上传</i-Button>
      </Upload>


  handleBeforeUpload (file) {
        if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel') {
          // this.uploadData.file = file
        }
      },

   handleFormatError (file) {
        this.$Message.error('文件 ' + file.name + ' 格式不正确,请上传.xls,.xlsx文件。')
        this.$nextTick(() =>{
          this.uploadData = {}
        })
      },
  handleSuccess (res, file) {
        console.log(res, 'resimport')
        if (res.code == 0) {
          this.$Message.success('成功!');
        } else {
          this.$Message.error(res.msg)
        }
      },

// 一个防抖写法
  var debounce = (fn, delay) => {
    // 1.定义一个定时器, 保存上一次的定时器
    let timer = null
    // 2.真正执行的函数
    const _debounce = function() {
      // 取消上一次的定时器
      if (timer) clearTimeout(timer)
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn()
      }, delay || 1000)
    }
    return _debounce
  };
// 使用
funName: debounce(()=>{
    // 执行操作
}, 300)

  

标签:vue2,debounce,upload,timer,file,res,Message,上传,iview
From: https://www.cnblogs.com/everseventh/p/18636173

相关文章

  • upload - labs 通关手册
    这是一份关于upload-labs通关手册的文档,详细记录了通过21个关卡的多种方法,包括前端检测绕过、后端黑名单绕过、白名单绕过、文件包含漏洞利用、条件竞争等多种类型的漏洞利用方式,同时提供了相应的代码示例和操作步骤。前端检测绕过(Pass-01)禁用JS:在URL栏输入ab......
  • upload-labs关卡记录11
    先上传一个一句话木马试试,居然可以上传成功,复制图片链接,在另一个窗口打开:会发现,我们明明上传的是shell.php,但是这里就是没有了php,这样我们在执行我们相关的语句的时候就无法执行了:就会发现,这里我们执行语句是不行的,我们点击提示,发现这里提示会从文件名中去除。。。。这时......
  • 在contos上部署springboot+vue2项目
    jdk下载地址:https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.htmlnodejs下载地址:https://nodejs.org/zh-cn/download/prebuilt-binaries......
  • ServletFileUpload
    1.ServletFileUpload文件上传ServletFileUpload方式文件上传依赖commons-fileupload组件。对于commons-fileupload组件介绍:FileUpload依据规范RFC1867中”基于表单的HTML文件上载”对上传的文件数据进行解析,解析出来的每个项目对应一个FileItem对象。每个FileItem都有我们可能......
  • upload-labs关卡记录3
    同理,我们先上传一个一句话木马进行尝试,发现页面会刷新,于是看是白名单还是黑名单看到提示:不允许上传.asp,.aspx,.php,.jsp后缀文件!说明这是黑名单的类型。这里我们发现在限制里面,并没有说不能上传.htaccess后缀的文件,(.htaccess文件(或者“分布式配置文件”),全称是Hypertext......
  • Goby 漏洞发布|CVE-2024-9047 WordPress File Upload 插件 wfu_file_downloader.php 任
    漏洞名称:CVE-2024-9047WordPressFileUpload插件wfu_file_downloader.php任意文件读取漏洞EnglishName:CVE-2024-9047WordPressFileUploadPluginwfu_file_downloader.phpArbitraryFileReadVulnerabilitCVSScore:6.8漏洞描述:WordPressFileUpload插件是一款Wo......
  • 详细讲一下Vue2.x,Vue3.x,React的Vdom和Diff算法
    1.Vue的vdom和Diff1.1.Vue的实现://Vue2.x的VNode结构{tag:'div',//标签名data:{//节点数据class:'container',attrs:{id:'app'},on:{click:handler}},childr......
  • WordPress File Upload插件 任意文件读取漏洞复现(CVE-2024-9047)(附脚本)
    0x01产品描述:        FileUpload插件是一款功能强大的WordPress站点文件上传插件,它允许用户在WordPress站点中的文章、页面、侧边栏或表单中轻松上传文件到wp-contents目录中的任何位置。该插件使用最新的HTML5技术,确保在现代浏览器和移动设备上都能流畅运行,同时也......
  • Vue UI框架对比:Element UI、Ant Design Vue、iView
    VueUI框架对比:ElementUI、AntDesignVue、iView|Id|Title|DateAdded|SourceUrl|PostType|Body|BlogId|Description|DateUpdated|IsMarkdown|EntryName|CreatedTime|IsActive|AutoDesc|AccessPermission||-------------|-------------|------......
  • upload-labs-master第21关详细教程
    环境配置需要的东西phpstudy-2018链接:https://pan.baidu.com/s/1D9l13XTQw7o6A8CSJ2ff9Q提取码:027832位vc9和11运行库链接:https://pan.baidu.com/s/1pBV3W8UWJe0bmDl_cPFDQw提取码:0278upload-labs-master靶场链接:https://pan.baidu.com/s/1ERYzrlBe94PAi3A-W......