首页 > 其他分享 >vue - 点击按钮上传文件功能的实现

vue - 点击按钮上传文件功能的实现

时间:2023-07-13 14:13:21浏览次数:32  
标签:hasSelectedFile vue multiple focus accept 按钮 input 上传

  methods: {
    //点击调用上传方法
    async handleUpload(row) {
      try {
        let fileList = await this.getFile("", true); // 参数1:选取文件类型如.pdf、.png、.doc文件,参数2、是否多选
        console.log(fileList);   // 上传文件可在此处进行
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 获取文件
     * @param {string} [accept] 'image/png' 文件格式
     * @param {T} [multiple=false]  是否可以上传多个
     * @returns {Promise<T extends boolean ? File[] : File>}
    */
    getFile(accept, multiple) {
      return new Promise(function (resolve, reject) {
        const input = document.createElement("input");
        accept = accept ? accept.trim() : "";
        input.type = "file";
        input.multiple = multiple;
        let count = 0;
        function hasSelectedFile() {
          if (input.value !== "") {
            resolve(multiple ? Array.from(input.files) : input.files[0]);
          } else if (++count >= 40) {
            reject("pick cancel");
          } else {
            setTimeout(hasSelectedFile, 50);
          }
        }
        function focus() {
          window.removeEventListener("focus", focus);
          hasSelectedFile();
        }
        window.addEventListener("focus", focus);
        input.onchange = focus;
        input.accept = accept;
        input.click();
      });
    },
  },

标签:hasSelectedFile,vue,multiple,focus,accept,按钮,input,上传
From: https://www.cnblogs.com/axingya/p/17550281.html

相关文章

  • Vue 学习 Day2
    摘要:动态属性的限制当使用DOM内嵌模板(直接写在HTML文件里的模板)时,我们需要避免在名称中使用大写字母,因为浏览器会强制将其转换为小写: <a:[someAttr]="value">...</a> “someAttr”属性而非“someattr”,这段代码将不会  ......
  • vue3核心概念-Mutation-辅助函数
    你可以在组件中使用 this.$store.commit('xxx') 提交mutation,或者使用 mapMutations 辅助函数将组件中的methods映射为 store.commit 调用(需要在根节点注入 store)辅助函数只能在选项式API中使用<template><h3>Nums</h3><p>{{getCount}}</p><inputtype="......
  • ckeditor粘贴word图片自动上传组件
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • Nginx:client_body_temp_path 指令的上传文件测试
    结论硬盘必须要有上传文件3倍大小的剩余空间。否则会报错“nospaceleftondevice”。需要注意,这3份数据都会写到硬盘。大文件上传,实时观察硬盘剩余空间watch-n0.1"df-hm/",会看到很大的波动。默认临时文件路径文档Syntax: client_body_temp_pathpath[level1[lev......
  • Vue实现在线编辑excel、导入、导出(转)
    原文:https://www.baidu.com/link?url=AuyjwtPhSkYFpr8dpb-mdYLpniwQhc7URksdLNktJ-dFgYmR4eEv3VpuTWxEH1p37BdTjfnva4iKCX8_pZx4BgFMyFjgxtMT95FLe5N02vi&wd=&eqid=dc455e22000331bf0000000664af71c1概要Vue实现在线编辑excel、导入、导出整体架构流程luckysheet文档地址exceljs文......
  • Vue聊天界面请求AzureOpenAI
    Vue工程目录: <scriptsetup>import{ref}from"vue";importaxiosfrom"axios";importMarkdownItfrom"markdown-it";importhljsfrom"highlight.js";constlist=ref([]);constquestion=ref(""......
  • ckeditor粘贴word图片自动上传插件
    ​  自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能......
  • IIS部署createWebHistory路由模式的Vue项目
    接口使用NetCore,前端使用Vue3.+网站部署目录如下api(虚拟应用程序)webindex.html需要在服务器上按照URLRewrite下载地址:https://www.iis.net/downloads/microsoft/url-rewrite安装后在网站根目录下创建“web.config”文件,内容如下<?xmlversion="1.0"encoding="UTF-8"?......
  • vue 适配
    vue适配1.amfe-flexibleamfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。2.postcss-pxtorempostcss-pxtorem是postcss的插件,用于将像素单元生成rem单位。先安装amfe-flexible和postcss-pxtoremnpminstallamfe-flexible--savenpminstallpostcss-pxto......
  • [Vue] 使用pdf-lib和@pdf-lib/fontkit 报错 fontkit.create is not a function
    描述:pdf-lib注册了@pdf-lib/fontkit后(pdfDoc.registerFontkit(fontkit)),内部调用了fontkit的create方法,但是这个方法不存在。我在控制台打印了下fontkit对象,发现fontkit包了一层default,即 fontkit.default.create(),所以找不到这个方法, pdf-lib使用的是 fo......