a file upload component for vu

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

Click me （点我）.

IE10+

vue@1.0 + webpack + es6

$ npm install vue-upload-file Usage（使用） Props（参数）

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