vue-file-upload

vue1.x版本 可安装[email protected]版本
vue2.x版本 可安装当前最新版本

vue.js ，vue-loader 上传文件，vue-file-upload 代码里面包含demo，运行：

yarn install && yarn sart

install

npm

npm install --save vue-file-upload

CommonJS

var VueFileUpload = require('vue-file-upload');
//es6
import VueFileUpload from 'vue-file-upload';

属性（Props）

//目标服务器地址
url:{
  type:String,
  required:true
},
//最大文件上传数
max:{
  type:Number,
  default:Number.MAX_VALUE
},
//文件名称（服务端识别的上传文件名）
name:{
  type:String,
  default:'file'
},
//自动上传
autoUpload:{
  type:Boolean,
  default:false
},
//支持多选文件上传
multiple:{
  type:Boolean,
  default:false
},
//每新增一个待上传文件回调函数
onAdd:{
    type:Function,
    default:noop
},
//过滤函数
filters:{
  type:Array,
  default:()=>{
    return new Array();
  }
},
//请求附带参数
requestOptions:{
  type:Object,
  default:()=>{
    return{
      formData:{},
      headers:{},
      responseType:'json',
      withCredentials:false
    }
  }
},
//文件上传状态回调函数
events:{
  type:Object,
  default:()=>{
    return {
      onProgressUpload:noop(file,progress:number),//上传进度回调
      onCompleteUpload:noop(file,response,status,headers),//上传完成回调，不论成功或失败都调用
      onErrorUpload:noop(file,response,status,headers),//上传失败回调
      onSuccessUpload:noop(file,response,status,headers),//上传成功回调
      onAbortUpload:noop(file,response,status,headers),//取消上传
      onAddFileFail:noop(file,failFilter:array),//添加待上传文件失败回调，会通过filters过滤函数校验，不通过回调此函数
      onAddFileSuccess:noop(file)//添加待上传文件成功回调
    }
  }
}

按钮名称说明

<vue-file-upload>
    <span slot="label">上传文件</span>
</vue-file-upload>

文件属性说明（file）

const file = {
  name:"文件名称",//文件名称
  size:123,//文件大小
  type:"image/jpeg",//文件类型
  isReady: false,//，点击上传后，即将准备好上传
  isUploading:false,//正在上传
  isUploaded:false,//上传后
  isSuccess:false,//成功上传
  isCancel:false,//取消上传
  isError:false,//上传失败
  progress:0,//上传进度
}

//file 函数（method）
file.upload(); //上传该文件
file.cancel();//取消上传
file.remove();//移除该文件

方法（methods）

this.$refs.vueFileUploader.uploadAll()//上传所有队列中的文件
this.$refs.vueFileUploader.clearAll()//清空队列文件
this.$refs.vuefileUploader.setFormDataItem( key, value );//设置formdata

ES6

app.vue

<template lang="jade">
vue-file-upload(url='upload.do',
  ref="vueFileUploader",
  v-bind:filters = "filters",
  v-bind:events = 'cbEvents',
  v-bind:request-options = "reqopts",
  v-on:onAdd = "onAddItem")
    span(slot="label") 选择文件
table
  thead
    tr
      th name
      th size
      th progress
      th status
      th action
  tbody
    tr(v-for='file in files')
      td(v-text='file.name')
      td(v-text='file.size')
      td(v-text='file.progress')
      td(v-text='onStatus(file)')
      td
        button(type='button',@click="uploadItem(file)") 上传
button(type='button',@click="uploadAll") 上传所有文件
button(type='button',@click="clearAll") 清空文件列表
</template>
<script>
import VueFileUpload from 'vue-file-upload';
export default{
  data(){
    return{
      files:[],
      //文件过滤器，只能上传图片
      filters:[
        {
          name:"imageFilter",
          fn(file){
              var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
              return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
          }
        }
      ],
      //回调函数绑定
      cbEvents:{
        onCompleteUpload:(file,response,status,header)=>{
          console.log(file);
          console.log("finish upload;")
        }
      },
      //xhr请求附带参数
      reqopts:{
        formData:{
          tokens:'tttttttttttttt'
        },
        responseType:'json',
        withCredentials:false
      }
    }
  },
  mounted(){
    //设置formData数据
    this.$refs.vueFileUploader.setFormDataItem('authorization',"123");
  },
  methods:{
    onStatus(file){
      if(file.isSuccess){
        return "上传成功";
      }else if(file.isError){
        return "上传失败";
      }else if(file.isUploading){
        return "正在上传";
      }else{
        return "待上传";
      }
    },
    onAddItem(files){
        console.log(files);
        this.files = files;
    },
    uploadItem(file){
      //单个文件上传
      file.upload();
    },
    uploadAll(){
      //上传所有文件
      this.$refs.vueFileUploader.uploadAll();
    },
    clearAll(){
      //清空所有文件
      this.$refs.vueFileUploader.clearAll();
    }
  },
  components:{
    VueFileUpload
  }
}
</script>