vue文件上传控件
下载地址:https://pan.baidu.com/s/1Z3pFh2J3xWa8YYnLoseasg
使用方式:
<upload ref='upload' action-url='' :multiple='true'></upload>
action-url//文件保存地址
multiple//是否多个文件
在用户点击确定按钮的方法里执行:
this.$refs.upload.upload(callback);
其中callback用于接收保存后的图片的地址或者保存失败的错误信息,其中返回值为json格式
callback接收的参数返回值格式为: { res:1,//1表示成功 0表示失败 -1表示用户没有选择文件 mes:如果不是1 这里存放错误信息 oldImgpath:如果是编辑的话 ,这里存放的是之前的图片地址,也就是使用initData放的时候传入的图片地址 }
在我写的服务器端接收图片的代码里,我自定义了返回格式是 {res:1,mes:'',imgList:[]} 所以服务器端与file控件内部封装的返回json格式是一致的,这样有利于使用方的统一处理,所以建议服务器端接收图片的的接口返回格式与file控件一致
当希望初始化一些图片的时候: this.$refs.upload.initData([图片地址,图片地址]) 当希望重置参数的时候,执行: this.$refs.upload.reset()
使用案例:
this.$refs.upload.upload(data => {
if(data.res == "0"){//出错了
alert(data.mes)
return;
}
if(data.res == "-1"){//未选择文件
alert("用户未选择文件")
return;
}
let _data = data.imgList;//这个地方是用户新上传的图片地址
let oldImgpath = data.oldImgpath;//这个地方是编辑的时候传进去的图片地址
let imgPathList = [];
for(let i = 0; i < _data.length; i++){
imgPathList.push(_data[i].value)//保存图片地址
}
});
vue文件上传控件的更多相关文章
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- 符合BME风格的弹窗\菜单\表格\文件上传控件
1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......
随机推荐
- Qt QComBox 文本框输入itemText && 文本框查找item && 本文框添加Item &&设置显示Item数量
comBox的几种状态图如下: 图1:ui->comboBox->setEditable(true); 图2:ui->comboBox->setEditable(false ...
- 网络编程之实现server端并发聊天
程序如下: import socketserver class MyServer(socketserver.BaseRequestHandler): #自己定义一个类,继承BaseRequestHan ...
- 微信网页浏览器打开链接后跳转到其他浏览器下载APK文件包
做微信营销活动或者APK下载推广时候,是无法直接下载,做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器.但是这个方法IO ...
- RESTful API 最佳实践----转载阮一峰
文章地址http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html
- php中 "$$" 的详解
php中 $$str 这种写法称为可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = " ...
- Deep Convolution Auto-encoder
一.概念介绍 自编码器是一种执行数据压缩的网络架构,其中的压缩和解压缩功能是从数据本身学习得到的,而非人为手工设计的.自编码器的两个核心部分是编码器和解码器,它将输入数据压缩到一个潜在表示空间里面,然 ...
- (Review cs231n) Spatial Localization and Detection(classification and localization)
重在图像的定位和检测的内容. 一张图片中只有一种给定类别标签的对象,定位则是图像中有对象框:再这些类中,每一个训练目标都有一个类和许多的图像内部对应类的位置选框. 猜想的仅是类标签,不如说它们是位置 ...
- Load data local infile 实验报告
1.实验内容: 利用SQL语句“load data local infile”将“pet.txt”文本文件中的数据导入到mysql中 (pet表在数据库menagerie中) 2.实验过程及结果: ( ...
- Winform 加载datagridview
string str = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Test;Integrated Security=True ...
- python源码为何都是pass
最近看Python代码 按照一个函数递进的看下去,最后发现,遇到很多源码什么逻辑都没写,仅仅以一个pass 结尾 但却能得到应该得到的结果,这点真的很奇怪,上网查找后 觉得下面的 ...