ant-design vue上传 多文件 、单文件上传

上传按钮

在data中声明fileList对象用来保存文件数据，本次实验限制上传数量最多为3个，单文件上传方式每次获取 file对象里的file文件即可

 // 移除图片
    handleRemovevideo(file){
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
      //上传图片之前的校验
    beforeUploadFilevideo(file) {
      const { $message } = this
      if(this.fileList.length == 3){
        $message.warn("只能上传3个文件")
        const newFileList = this.fileList.slice();
        newFileList.splice(-1, 1);
        //只取前3个
        this.fileList = newFileList
      }else{
        this.fileList = [...this.fileList, file]
      }
      //获得允许上传的文件类型
      var type = this.$refs.files.$attrs['data-type']
      //采用遍历方式判断文件类型和大小是否都符合规则，也可以只校验当前文件
      //const index = this.fileList.indexOf(file); 拿到文件索引之后再判断
      for (let item of this.fileList) {
        var exName =  item.name.split('.')[1] //获得文件后缀名
        if(type.indexOf(exName) === -1){//类型不受支持
          $message.error('请检查文件类型,只允许上传图片文件')
          const index = this.fileList.indexOf(file);
          this.fileList.splice(index,1)
          break;
        }
        //判断文件大小
        if (item.size/1024/1024 > 20) {
          $message.error('上传文件大小不能超过20MB')
          break;
        }
        item.preview = getBase64(item.originFileObj)
      }
      return false;
    },
    //上传当前图片,每次校验完毕及时上传，需要使用formData 方式，不然问题可能很多
    handleChangeVideo(file){
      const { $message } = this
      const formData = new FormData()
      formData.append('file', file.file)
      this.fileList = file.fileList
      upload(formData)
      .then(res=>{
        if(res.code == 200){
          $message.success(res.msg)
        }else if (res.code == 500){
          $message.error(res.msg)
        }else(
          $message.error(res.msg)
        )
      })
      .catch(err=>{
        $message.error(err.message)
      })
    },

//上传文件 api  ，需要加headers
export function uploadInstrument(parameter) {
    return axios({
        headers: { 'Content-Type': 'multipart/form-data' },
        url: api.upload,
        method: 'post',
        data: parameter
    })
}

后端代码具体上传文件方法自己实现即可

如有不正确或更好的方式，请大家多多指正!!!