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)//保存图片地址
          }
        });

 

转载于:https://www.cnblogs.com/mrzhu/p/9843116.html