vue-img-upload
移動(dòng)端圖片帶預(yù)覽上傳組件
項(xiàng)目地址：https://github.com/duanxb/vue-img-upload
功能
+ 1、以兼容安卓梗肝、蘋果端瀏覽器與微信端瀏覽器；
+ 2禀晓、圖片上傳預(yù)覽展示
+ 3坝锰、圖片上傳進(jìn)度展示
+ 4、不足：目前只支持一次上傳一個(gè)文件顷级，可在Html中實(shí)現(xiàn)多個(gè)文件上傳的功能
+ 5、不足：暫不支持圖片壓縮帽芽，后期可添加該功能
演示
vue-img-upload
Code DEMO
<vue-img-uploader :readonly="readonly" theme="light" accept="image/*" icon="camera" bgimage="/static/imgs/seriouswork/idcard-z.png" :img-src="relationFiled.idcard_positive_url" :ajax-url="uploadApi" @uploadsuccess="onUploadSuccess($event, 'idcard_positive')"></vue-img-uploader>
Props 參數(shù)
| 參數(shù) | 說明 |
|---|---|
| accept | [String], 默認(rèn)情況下可能會(huì)導(dǎo)致選擇框彈出慢的問題翔冀，請(qǐng)針對(duì)具體化圖片類型即可解決，默認(rèn)：'image/,video/;' |
| id | [String]搬瑰，唯一性，默認(rèn)自動(dòng)生成一個(gè)隨機(jī)數(shù) |
| onChange | [Function]：文件選擇回調(diào) |
| readonly | [Boolean] 是否設(shè)置為只讀模式泽论，只讀模式卡乾，不可上傳。 |
| readonlyTipText | [String] 只讀模式下说订，顯示的文案,默認(rèn)：'不可更改' |
| bottomText | [String] 選擇圖片后，底部顯示的文案钙姊，默認(rèn)：'點(diǎn)擊圖片以修改' |
| icon | [String] 顯示的圖標(biāo) |
| maxSize | [Number] 上傳圖片的大小，默認(rèn)最大為：5M |
| theme | [String] 上傳控件的classname |
| bgimage | [String] 上傳控件的背景圖 |
| ajaxUrl | [String] ajax上傳的URL |
| iframeUploadUrl | [String] IE9中iframe 上傳url |
事件
| 參數(shù) | 說明 |
|---|---|
| input | [Function] 雙向綁定, 傳遞file文件信息 |
| onChange | [Function] 文件選擇回調(diào)思恐；參數(shù)為 file文件信息 |
| uploadsuccess | 上傳成功的回調(diào)膊毁，參數(shù)為ajax返回的data |
| uploaderror | 上傳失敗的回調(diào)，參數(shù)為ajax返回的data |
Authors
- 如果你遇到了什么神bug婚温，請(qǐng)發(fā)起 ISSUE 聯(lián)系我 ~
- 致力于前端開發(fā)，一起努力中……
