下载地址: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文件上传控件的更多相关文章

  1. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  2. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  3. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  4. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  5. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)

    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...

  6. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

  7. 对FileUpload文件上传控件的一些使用方法说明

    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...

  8. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  9. 符合BME风格的弹窗\菜单\表格\文件上传控件

    1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......

随机推荐

  1. HDU 1556 BIT区间修改+单点查询(fread读入优化)

    BIT区间修改+单点查询 [题目链接]BIT区间修改+单点查询 &题解: BIT区间修改+单点查询和求和的bit是一模一样的(包括add,sum) 只不过是你使用函数的方式不一样: 使用区间的 ...

  2. 一个比较难忘的BUG

    本学期开设了软件测试课程,在课上有讨论到bug,想到bug,真是很令人头疼的东西,相信每个程序都多多少少会有几个头疼的bug. 初学java时写过一个字符串判断的循环,之前学的C++字符类型用“==” ...

  3. mvc jquery ajax传递数组null问题

    mvc jquery ajax传递数,  areaIds是个int数组.后台action用list<int>接收.当我想传空值时,先用null传递,结果action收到的AreaIds竟然 ...

  4. [virtualbox] win10与centos共享目录下,nginx访问问题

    原文,http://blog.csdn.net/zhezhebie/article/details/73554872 virtualbox自动挂载之后,默认是挂载在/media/sf_WWW下面的: ...

  5. WPF Combobox数据绑定 Binding

    combobox数据绑定List链表集合区分显示值与选择的值 整体效果: 根据combobox选择情况分别打印选取值与显示值 代码: Windows窗体: <Window x:Class=&qu ...

  6. JavaFX-Application

    JavaFX—Application 1.Application是JavaFX程序的入口,任何javafx应用程序程序都要继承该类并重写start()方法 public class TsetStage ...

  7. Lua 哑变量

    [1]哑变量 哑变量,又称为虚拟变量.名义变量. 还得理解汉语的博大精深,‘虚拟’.‘名义’.‘哑’等等,都是没有实际意义.所以,哑变量即没有现实意义的变量. 哑变量的应用示例如下: local fi ...

  8. 堆排序 P1090 合并果子

    P1090 合并果子 本题要用到堆 一个小根堆 每次取出两堆,合并成一堆,为了让多多花费体力最少,我们要尽量少的重复大堆的合并,因此每次合并完以后,要把新的一坨放到堆里排一排,维护一个堆 有必要强调一 ...

  9. java消息服务学习之JMS高级特性

    将介绍的内容是: 控制消息确认.为发送消息指定选项.创建临时目的地.使用JMS本地事务.异步发送消息 五个方面. 1.控制消息确认 在JMS消息得到确认之前,并不认为它已经成功使用.要成功使用消息,通 ...

  10. html5中视频播放问题总结

    html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" con ...