Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/waynecz/vue-img-inputer

🏞 A graceful image type inputer / uploader
https://github.com/waynecz/vue-img-inputer

component input ui vue vue2

Last synced: 3 months ago
JSON representation

🏞 A graceful image type inputer / uploader

Lists

README 

        






  vip









  GitHub release

  poi

  Bili










  

    教程: 从0开始做一个文件选择(上传)组件

    |

    查看 Demo

  








## 简介



- 就像 ``，不支持多图片选择

- 支持自动上传功能

- 拖拽选择、预览、也可以当 `` 使用

- 两套主题，其他高度定制







## 截图





  








## 使用



```bash

npm install vue-img-inputer

```



```javascript

import ImgInputer from 'vue-img-inputer'

import 'vue-img-inputer/dist/index.css'



Vue.component('ImgInputer', ImgInputer)

```



```html



```







## 接口



自动上传 相关





1.  **`auto-upload`**: Boolean  

    设置开启自动上传功能



2.  **`action`**: String  

    上传的 URL



3.  **`upload-key`**: String  

    **default**: `file`  

    图片在 form-data 中的 key 名



4.  **`extra-data`**: Object  

    上传的额外数据



5.  **`headers`**: Object  

    上传的额外 headers



6.  **`with-cookie`**: Boolean  

    是否携带 cookie



7.  **`on-start`**: Function  

    **params**: func ( file )  

    上传开始的钩子函数



8.  **`on-progress`**: Function  

    **params**: func ( event, file )  

    上传中的钩子函数，可以通过 `event.percent` 获得当前上传进度



9.  **`on-success`**: Function  

    **params**: func ( res, file )  

    上传成功的钩子函数，`res` 是服务端返回的数据



10. **`on-error`**: Function  

    **params**: func ( err, file )  

    上传失败的钩子函数







Input 标签 相关





1.  **`accept`**: String  

    **default**: `image/*,video/*;`  

    建议设置成像 `image/jpg,image/gif;` 之类的具体指，不然可能造成文件夹呼出特别慢



2.  **`placeholder`**: String  

    **default**: `点击或拖拽选择图片`



3.  **`id`**: String  

    **default**: random string in 4 length



4.  **`readonly`**: Boolean



5.  **`capture`**: Boolean  

    **default**: `false`  

    在移动端是否直接呼出相机



6.  **`max-size`**: Number  

    **default**: 5120  

    图片大小限制 (KB)



7.  **`name`**: Boolean  

    原生 name 属性



8.  **`任意 input 的原生属性`**: any  

    任意 input 的原生属性都将继承给内部的 input 标签







视觉  相关





1.  **`img-src`**: String  

    图片回填地址，设置后组件将会像 `` 标签一样



2.  **`theme`**: String  

    **default**: `material`

    两套主题 (light / material)



3.  **`size`**: String

    small / normal / large



4.  **`icon`**: String  

    clip / img / img2



5.  **`ali-icon`**: String  

    如果你用了 [iconfont.cn](http://iconfont.cn/), 可以设置你项目里的 icon unicode 值



6.  **`no-mask`**: Boolean  

    去除 hover 蒙版



7.  **`no-hover-effect`**: Boolean  

    去除所有 hover 效果



8.  **`bottom-text`**: String  

    **default**: `点击或拖拽图片以修改`  

    hover 后底部的文字



9.  **`readonly-tip-text`**: String  

    **default**: `不可更改`  

    只读情况下底部的文字







事件





1.  **`on-change`**: Function  

    **params**: func ( file, fileName )  

    文件更改时的钩子函数



2.  **`onExceed`**: Function  

    **params**: func ( file )  

    文件超出最大设置时的钩子函数







组件方法





1.  **`reset`**  

    重置组建的数据，但不重置 `img-src`