A vue.js component that allows for drag’n’drop file upload.

Form

Documentation

vue-upload-file

A file upload component for vue. (vue文件上传组件)

Change log (更新日志)

@1.1.0

  • 多语言支持 {langType: zh/en}
  • 调整了Props命名 【otherParams => params, langConf => langExt】

Demo(示例)

Click me (点我).

Brower compatibility(浏览器兼容)

IE10+

Env(配置环境)

[email protected] + webpack + es6

Install(安装)

npm

$ npm install vue-upload-file

Usage(使用)

Props(参数)

名称 类型 默认 说明
field String 'upload' 域,上传文件name,触发事件会带上(如果一个页面多个图片上传控件,可以做区分
key 0 类似于id,触发事件会带上(如果一个页面多个图片上传控件,可以做区分
value Boolean 是否显示控件
url String '' 上传地址
params Object null 要附带的其他数据,如 {k:v}
maxSize Number 2048 单文件大小限制(kb)
onlyImg Boolean false 仅限图片
onlySingle Boolean false 仅限单文件上传
langType String 'zh' zh/en 语言类型
langExt Object 语言包扩展

Language Package(语言包)

{ 	zh: { 		hint: '点击,或将文件拖动至此处', 		loading: '正在上传……', 		noSupported: '浏览器不支持该功能,请使用IE10以上或其他现代浏览器!', 		success: '上传成功', 		fail: '上传失败', 		error: { 			onlyImg: '仅限图片格式', 			onlySingle: '仅限单文件上传', 			outOfSize: '单文件大小不能超过 ', 		} 	}, 	en: { 	   hint: 'Click, or drag the file here', 	   loading: 'Uploading……', 	   noSupported: 'Browser does not support, please use IE10+ or other browsers', 	   success: 'Upload success', 	   fail: 'Upload failed', 	   error: { 		   onlyImg: 'Images only', 		   onlySingle: 'Single file only', 		   outOfSize: 'File exceeds size limit: ' 	   }    } }

Example(使用示例)

<style media="screen"> 	#app { 		position: relative; /*控件上级容器必须是相对定位或绝对定位*/ 	} </style>  <div id="app"> 	<a class="btn" @click="toggleShow">上传图片</a> 	<my-upload url="/upload" 		lang-type="en" 		field="img" 		key="1" 		max-size="500" 		:only-single="true" 		:value="true" 		:only-img="true" 		:params="params"></my-upload> </div>  <script> 	import 'babel-polyfill'; //因为使用了es6的一些方法,需要babel垫片,如果你项目中已有相关兼容性方案,可忽略 	import Vue from 'vue'; 	import mySwitch from 'vue-upload-file';  	new Vue({ 		el: '#app', 		data: { 			show: true, 			params: { 				token: '123456798', 				name: 'img' 			} 		}, 		components: { 			'my-upload': myUpload 		}, 		methods: { 			toggleShow() { 				this.show = !this.show; 			} 		}, 		events: { 			/** 			 * 上传成功 			 * 			 * [param] jsonData 返回的数据(-----注意:已进行json转码-----) 			 * [param] field 你设置的域 			 * [param] key 你设置的键 			 */ 			uploadSuccess(jsonData, field, key){ 				console.log('-------- 上传成功 --------'); 				console.log(jsonData); 				console.log('field: ' + field); 				console.log('key: ' + key); 			}, 			/** 			 * 上传失败 			 * 			 * [param] status 返回的状态值 			 * [param] field 你设置的域 			 * [param] key 你设置的键 			 */ 			uploadFail(status, field, key){ 				console.log('-------- 上传失败 --------'); 				console.log(status); 				console.log('field: ' + field); 				console.log('key: ' + key); 			} 		} 	});  </script>

You May Also Like