下载地址: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. js某一元素在数组中的索引

    第一种:数组遍历 function search(arr,dst){ var i = arr.length; while(i-=1){ if (arr[i] == dst){ return i; } ...

  2. 如何正确对用户密码进行加密?转自https://blog.csdn.net/zhouyan8603/article/details/80473083

    本文介绍了对密码哈希加密的基础知识,以及什么是正确的加密方式.还介绍了常见的密码破解方法,给出了如何避免密码被破解的思路.相信读者阅读本文后,就会对密码的加密有一个正确的认识,并对密码正确进行加密措施 ...

  3. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  4. 304. Range Sum Query 2D - Immutable(动态规划)

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  5. 解决多版本共存时,python/pip等命令失效

    问题呈现: Windows环境下,多版本Python解释器共存时,由于未配置环境变量或者反复卸载重装解释器等原因,CMD交互下输入Python或者pip等命令时失效 解决方式: 1)配置各个解释器的环 ...

  6. WPF Combobox数据绑定 Binding

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

  7. CLASS类继承

    单继承:# class People: 经典类class People(object): #新式类 def __init__(self,name,age,n=1000): self.name = na ...

  8. C# 反射 Type.GetType()

    对于外部调用的动态库应用反射时要用到Assembly.LoadFile(),然后才是获取类型.执行方法等;当用反射创建当前程序集中对象实例或执行某个类下静态方法时只需通过Type.GetType(&q ...

  9. Java 必须掌握的 20+ 种 Spring 常用注解

    Spring部分 1.声明bean的注解 @Component 组件,没有明确的角色 @Service 在业务逻辑层使用(service层) @Repository 在数据访问层使用(dao层) @C ...

  10. java面试经常问到的计算机网络问题

    GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...