vue文件上传控件

时间:2023-03-09 22:47:13
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)//保存图片地址
          }
        });