vue-upload-file

1.1.0 • Public • Published

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(配置环境)

vue@1.0 + 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> 

Package Sidebar

Install

npm i vue-upload-file

Weekly Downloads

16

Version

1.1.0

License

ISC

Last publish

Collaborators

  • dai-siki