yarn install&& yarn start

install

npm

npm install --save vue-file-upload

CommonJS

varVueFileUpload=require('vue-file-upload');//es6importVueFileUploadfrom'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:()=>{returnnewArray();}},//请求附带参数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><spanslot="label">上传文件</span></vue-file-upload>

文件属性说明（file）

constfile={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

<templatelang="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>importVueFileUploadfrom'vue-file-upload';exportdefault{data(){return{files:[],//文件过滤器，只能上传图片filters:[{name:"imageFilter",fn(file){vartype='|'+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"上传成功";}elseif(file.isError){return"上传失败";}elseif(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>