vue-file-upload
vue1.x版本 可安装vue-file-upload@0.0.7版本
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 = ;//es6;
属性(Props)
//目标服务器地址url: type:String required:true//最大文件上传数max: type:Number default:NumberMAX_VALUE//文件名称(服务端识别的上传文件名)name: type:String default:'file'//自动上传autoUpload: type:Boolean default:false//支持多选文件上传multiple: type:Boolean default:false//每新增一个待上传文件回调函数onAdd: type:Function default:noop//过滤函数filters: type:Array { return ; }//请求附带参数requestOptions: type:Object { return formData:{} headers:{} responseType:'json' withCredentials:false }//文件上传状态回调函数events: type:Object { return onProgressUpload://上传进度回调 onCompleteUpload://上传完成回调,不论成功或失败都调用 onErrorUpload://上传失败回调 onSuccessUpload://上传成功回调 onAbortUpload://取消上传 onAddFileFail://添加待上传文件失败回调,会通过filters过滤函数校验,不通过回调此函数 onAddFileSuccess://添加待上传文件成功回调 }
按钮名称说明
上传文件
文件属性说明(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; //上传该文件file;//取消上传file;//移除该文件
方法(methods)
this$refsvueFileUploader//上传所有队列中的文件this$refsvueFileUploader//清空队列文件this$refsvuefileUploader;//设置formdata
ES6
app.vue
<template lang="jade">vue-file- 选择文件table thead tr th name th size th progress th status th action tbody td 上传 上传所有文件 清空文件列表</template><script>; { return files: //文件过滤器,只能上传图片 filters: name:"imageFilter" { var type = '|' + filetype + '|'; return '|jpg|png|jpeg|bmp|gif|' !== -1; } //回调函数绑定 cbEvents: { console; console } //xhr请求附带参数 reqopts: formData: tokens:'tttttttttttttt' responseType:'json' withCredentials:false } { //设置formData数据 this$refsvueFileUploader; } methods: { iffileisSuccess return "上传成功"; else iffileisError return "上传失败"; else iffileisUploading return "正在上传"; else return "待上传"; } { console; thisfiles = files; } { //单个文件上传 file; } { //上传所有文件 this$refsvueFileUploader; } { //清空所有文件 this$refsvueFileUploader; } components: VueFileUpload </script>