iview upload 组件官网上给出的用法是,选择附件后就立马上传附件。我不想让他立马上传,我想让他和其他一些信息一起上传,百度查了一些资料照大神总结的例子实现了现在分享一下。

<Upload action="temp" accept=".zip" :before-upload="handleUpload">
<Button icon="ios-cloud-upload-outline">上传</Button></Upload>

说明:这里红色的这个temp是随便写的一个上传地址,上传肯定会失败,但是官网上介绍action是必填项所以不得已填了一个temp,这里只要是一个无用的就行。

重点有用的是这个handleUpload方法

handleUpload(file) {
    console.log('文件名称:' + file.name);
//this.file是全局变量 this.file = file;
//阻止自动上传
return false;
},

如何提交是与后端交互的问题不是本例的重点就不讲了。

iview upload 上传文件样例的更多相关文章

  1. 使用vue+iview实现上传文件及常用的下载文件的方法

    首先说明一下,我们这次主要用的还是iview的upload上传组件,下面直接上代码 <Upload ref="upload" multiple='true' //是否支持多文 ...

  2. Struts Upload上传文件

    1.Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.te ...

  3. element-ui upload上传文件并携带参数 使用formData对象

    需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...

  4. thinkphp Upload上传文件在客户端生成的临时文件$_FILES['file']['tmp_name']

    1.关于thinkphp 的Upload的$_FILES['file']['tmp_name'] 在使用thinkphp上传图片的时候,在上传的$_FILES数组中,有一个$_FILES['file' ...

  5. Element-UI中Upload上传文件前端缓存处理

    Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性.但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件 ...

  6. upload 上传文件

    func SaveUploadedFile(file *multipart.FileHeader, dst string) error{ src, err := file.Open() if err ...

  7. PHP上传文件超过了最大文件大小限制导致无法上传成功

    最近的研究<HeadFirst PHP & MySQL>第一本书5章"使用存储在文件中的数据",难道当一个文件上传应用程序,发生了错误.即,文件不能成功上传.这 ...

  8. common-fileupload上传文件

    文件上传在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件上传功 ...

  9. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  10. Android应用开发中webview上传文件的几种思路

    1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClie ...

随机推荐

  1. 前端优化之路:git commit 校验拦截

    [前言] 前面在git分支规范那篇文章里,介绍了commit提交规范,如下图 但是想要做到高效落地执行,就需要做些别的功课,先展示下成果图 没错,对不符合规范的commit进行了拦截,符合才可以成功提 ...

  2. Cocos-JS HTTP网络请求

    网络结构 网络结构是网络构建方式,目前流行的有客户端服务器结构(C/S结构)和点对点(P2P)结构网络. 客户端服务器结构(C/S结构) 这种结构又被称为Clicent/Server结构,它是一种主从 ...

  3. DFS遍历图(链式邻接表实现)

    1 #include<iostream> 2 #include<string.h> 3 #include<stdlib.h> 4 #include<stdio ...

  4. ElasticSearch安装中文分词器(插件)、分词测试

    https://github.com/medcl/elasticsearch-analysis-ik 分词测试: https://www.elastic.co/guide/en/elasticsear ...

  5. 谷歌浏览器输入地址后http自动转https解决方法

    谷歌浏览器输入地址后http自动转https解决方法 https://blog.csdn.net/qq_51563725/article/details/133691727

  6. Python——第一章:循环语句while

    循环语句可以让我们的代码重复的去执行 while循环: while 条件:        代码 过程: 判断while循环的条件是否为真, 如果真, 执行代码. 然后再次判断条件.....直到条件为假 ...

  7. 云MSP技本功|redis的5种对象与8种数据结构之字符串对象(下)

    简介: 引言 本文是对<redis设计与实现(第二版)>中数据结构与对象相关内容的整理与说明.本篇文章只对对象结构,1种对象--字符串对象.以及字符串对象所对应的两种编码--raw和emb ...

  8. springboot整合hibernate(非JPA)(一)

    springboot整合hibernate(非JPA)(一) springboot整合hibernate,非jpa,若是jpa就简单了,但是公司项目只有hibernate,并要求支持多数据库,因此记录 ...

  9. JavaFx之整合JFoenix(十四)

    JavaFx之整合JFoenix JFoenix是JavaFx流行的UI框架之一 github:https://github.com/sshahine/JFoenix 整合Maven <!--h ...

  10. Kubernetes常见错误总结

    1.屏幕持续打印Pod日志报error: unexpected EOF错误 Kubernetes: requesting flag for "kubectl logs" to av ...