├── .eslintignore
├── .gitignore
├── postcss.config.js
├── src
    ├── assets
    │   ├── demo.png
    │   ├── vip-logo.png
    │   └── screenshot.gif
    ├── style
    │   ├── fonts
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.ttf
    │   │   └── iconfont.svg
    │   ├── iconfont.scss
    │   └── index.scss
    ├── index.js
    ├── ajax.js
    └── index.vue
├── example
    ├── index.js
    ├── components
    │   └── Hello.vue
    └── App.vue
├── bili.config.js
├── .eslintrc.js
├── .release-it.json
├── package.json
├── README-CN.MD
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | *.scss


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | *.log
4 | .idea/
5 | dist
6 | package-lock.json


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waynecz/vue-img-inputer/HEAD/src/assets/demo.png


--------------------------------------------------------------------------------
/src/assets/vip-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waynecz/vue-img-inputer/HEAD/src/assets/vip-logo.png


--------------------------------------------------------------------------------
/src/assets/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waynecz/vue-img-inputer/HEAD/src/assets/screenshot.gif


--------------------------------------------------------------------------------
/src/style/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waynecz/vue-img-inputer/HEAD/src/style/fonts/iconfont.eot


--------------------------------------------------------------------------------
/src/style/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waynecz/vue-img-inputer/HEAD/src/style/fonts/iconfont.ttf


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ImgInputer from './index.vue'
2 | import './style/index.scss'
3 | 
4 | export default ImgInputer
5 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue/dist/vue.esm'
 2 | import App from './App.vue'
 3 | import imgInputer from '../src/index.js'
 4 | 
 5 | Vue.component('ImgInputer', imgInputer)
 6 | 
 7 | /* eslint-disable no-new */
 8 | new Vue({
 9 |   el: '#app',
10 |   template: '<App/>',
11 |   components: { App }
12 | })
13 | 


--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
 1 | const copy = require('rollup-plugin-copied')
 2 | 
 3 | module.exports = {
 4 |   plugins: [
 5 |     'vue',
 6 | 
 7 |     copy([
 8 |       {
 9 |         from: './src/style/fonts',
10 |         to: './dist/fonts',
11 |         emitFiles: true
12 |       }
13 |     ])
14 |   ],
15 | 
16 |   format: ['cjs', 'umd', 'es'],
17 |   filename: 'index[suffix].js'
18 | }
19 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 5 |   extends: 'standard',
 6 |   // required to lint *.vue files
 7 |   plugins: ['vue'],
 8 |   // add your custom rules here
 9 |   rules: {
10 |     // allow async-await
11 |     'space-before-function-paren': 'off',
12 |     'generator-star-spacing': 'off',
13 |     'no-undef': 'off'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/example/components/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello"><h1>优雅的图片输入、上传组件</h1> <h1>自动上传、图片预览、拖拽、回填、主题可选、高度可定制</h1> <small>多用于非单个上传，随其余表单字段一起上传的图片</small></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'hello'
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | .hello {
13 |   margin: 20px 0;
14 | }
15 | 
16 | h1,
17 | h2 {
18 |   font-weight: normal;
19 |   font-size: 20px;
20 |   line-height: 1.3;
21 |   margin: 3px 0;
22 | }
23 | 
24 | small {
25 |   display: block;
26 |   margin-top: 20px;
27 | }
28 | 
29 | ul {
30 |   list-style-type: none;
31 |   padding: 0;
32 | }
33 | 
34 | li {
35 |   display: inline-block;
36 |   margin: 0 10px;
37 | }
38 | 
39 | a {
40 |   color: #42b983;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "preReleaseId": null,
 3 |   "pkgFiles": ["package.json"],
 4 |   "use": "git.tag",
 5 |   "scripts": {
 6 |     "beforeStart": null,
 7 |     "beforeBump": null,
 8 |     "afterBump": null,
 9 |     "beforeStage": null,
10 |     "changelog": "git log --pretty=format:\"* %s (%h)\" [REV_RANGE]",
11 |     "afterRelease": null
12 |   },
13 |   "git": {
14 |     "requireCleanWorkingDir": false,
15 |     "requireUpstream": false,
16 |     "addUntrackedFiles": false,
17 |     "commit": true,
18 |     "commitMessage": "build(release): ${version}",
19 |     "commitArgs": "",
20 |     "tag": true,
21 |     "tagName": "${version}",
22 |     "tagAnnotation": "Release ${version}",
23 |     "tagArgs": "",
24 |     "push": true,
25 |     "pushArgs": "",
26 |     "pushRepo": "origin"
27 |   },
28 |   "prompt": {
29 |     "commit": true,
30 |     "tag": true,
31 |     "push": true,
32 |     "ghRelease": true,
33 |     "glRelease": false,
34 |     "publish": true
35 |   }
36 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-img-inputer",
 3 |   "version": "2.1.6",
 4 |   "author": "waynecz <451578533@qq.com>",
 5 |   "license": "MIT",
 6 |   "description": "A graceful image type inputer / uploader",
 7 |   "main": "dist/index.js",
 8 |   "module": "dist/index.es.js",
 9 |   "scripts": {
10 |     "dev": "npx poi example/index",
11 |     "release": "npx release-it",
12 |     "build:demo": "npx poi build",
13 |     "build": "rm -rf ./dist && npx bili"
14 |   },
15 |   "files": [
16 |     "dist/*"
17 |   ],
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/waynecz/vue-img-inputer"
21 |   },
22 |   "keywords": [
23 |     "file-input",
24 |     "image",
25 |     "vue",
26 |     "components",
27 |     "ui"
28 |   ],
29 |   "bugs": {
30 |     "url": "https://github.com/waynecz/vue-img-inputer/issues"
31 |   },
32 |   "peerDependencies": {
33 |     "vue": "^2.5.2"
34 |   },
35 |   "devDependencies": {
36 |     "autoprefixer": "^9.4.2",
37 |     "babel-eslint": "^8.2.3",
38 |     "bili": "^3.1.2",
39 |     "eslint-config-standard": "^11.0.0",
40 |     "eslint-plugin-import": "^2.12.0",
41 |     "eslint-plugin-node": "^6.0.1",
42 |     "eslint-plugin-promise": "^3.8.0",
43 |     "eslint-plugin-standard": "^3.1.0",
44 |     "eslint-plugin-vue": "^4.5.0",
45 |     "node-sass": "^4.9.0",
46 |     "poi": "^10.2.7",
47 |     "release-it": "^9.8.1",
48 |     "rollup-plugin-copied": "^0.0.2",
49 |     "rollup-plugin-eslint": "^4.0.0",
50 |     "rollup-plugin-vue": "^4.2.0",
51 |     "sass-loader": "^7.1.0",
52 |     "vue": "^2.5.17",
53 |     "vue-template-compiler": "^2.5.16"
54 |   },
55 |   "engines": {
56 |     "node": ">= 8.0.0",
57 |     "npm": ">= 6.0.0"
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 9"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/src/ajax.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Code copied from https://github.com/ElemeFE/element/blob/dev/packages/upload/src/ajax.js
 3 |  */
 4 | 
 5 | function getError(action, option, xhr) {
 6 |   let msg
 7 |   if (xhr.response) {
 8 |     msg = `${xhr.response.error || xhr.response}`
 9 |   } else if (xhr.responseText) {
10 |     msg = `${xhr.responseText}`
11 |   } else {
12 |     msg = `fail to post ${action} ${xhr.status}`
13 |   }
14 | 
15 |   const err = new Error(msg)
16 |   err.status = xhr.status
17 |   err.method = 'post'
18 |   err.url = action
19 |   return err
20 | }
21 | 
22 | function getBody(xhr) {
23 |   const text = xhr.responseText || xhr.response
24 |   if (!text) {
25 |     return text
26 |   }
27 | 
28 |   try {
29 |     return JSON.parse(text)
30 |   } catch (e) {
31 |     return text
32 |   }
33 | }
34 | 
35 | export default function upload(option) {
36 |   if (typeof XMLHttpRequest === 'undefined') {
37 |     return
38 |   }
39 | 
40 |   const xhr = new XMLHttpRequest()
41 |   const action = option.action
42 | 
43 |   if (xhr.upload) {
44 |     xhr.upload.onprogress = function progress(e) {
45 |       if (e.total > 0) {
46 |         e.percent = (e.loaded / e.total) * 100
47 |       }
48 |       option.onProgress(e)
49 |     }
50 |   }
51 | 
52 |   const formData = new FormData()
53 | 
54 |   if (option.data) {
55 |     Object.keys(option.data).forEach(key => {
56 |       formData.append(key, option.data[key])
57 |     })
58 |   }
59 | 
60 |   formData.append(option.filename, option.file, option.file.name)
61 | 
62 |   xhr.onerror = function error(e) {
63 |     option.onError(e)
64 |   }
65 | 
66 |   xhr.onload = function onload() {
67 |     if (xhr.status < 200 || xhr.status >= 300) {
68 |       return option.onError(getError(action, option, xhr))
69 |     }
70 | 
71 |     option.onSuccess(getBody(xhr))
72 |   }
73 | 
74 |   xhr.open('post', action, true)
75 | 
76 |   if (option.withCredentials && 'withCredentials' in xhr) {
77 |     xhr.withCredentials = true
78 |   }
79 | 
80 |   const headers = option.headers || {}
81 | 
82 |   for (let item in headers) {
83 |     if (headers.hasOwnProperty(item) && headers[item] !== null) {
84 |       xhr.setRequestHeader(item, headers[item])
85 |     }
86 |   }
87 |   xhr.send(formData)
88 |   return xhr
89 | }
90 | 


--------------------------------------------------------------------------------
/src/style/iconfont.scss:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "ico";
 3 |   src: url('./fonts/iconfont.eot');
 4 |   src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAYsAAsAAAAACMAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkiXY21hcAAAAYAAAABpAAABssxxndlnbHlmAAAB7AAAAjsAAAKYgE2dJWhlYWQAAAQoAAAALwAAADYTeTlPaGhlYQAABFgAAAAcAAAAJAffA4dobXR4AAAEdAAAABIAAAAUFAEAAGxvY2EAAASIAAAADAAAAAwBOAH+bWF4cAAABJQAAAAeAAAAIAEUAExuYW1lAAAEtAAAAT8AAAIxs3CWInBvc3QAAAX0AAAANwAAAEl8ACmNeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTxbytzwv4EhhrmBoQEozAiSAwDsWAyseJztkMENgCAMRV8FjSGO4VHDCg7kyZ1YrWtgoRwcwk9e0/5AST4wA8E4jAjyIDTd5kr3A6n7kcvmxMrEpLuemrXUCt9+SOyen7ZV7IX9IQu/tl6vMcWWntP702nJa3YsO7Q4hBfPchmnAAAAeJxVUU1oE0EUnjfT7DZtd2022R0lNT+73d2ki2uan12qYFMWE6UHoScv5tDSIIqlIii0YAPSol5VkILgrTmpFLSil149evcggqA3ezdT36Ynh8e8+ea9b9437xEg5LjHDlmP+ISAC1KGG9UQgrrrmDJIk9wozMNsHDBdp46BKjcyGDAR0E8L4nOp5N3xYCeK2gdt0e10loGsAPAF8at10Ioi2J1Z80olsaHaWYXOIWGIYQfTo0h0V47JcqdzQoii1oc27OKLazNiQ8naKiEM9X0fAVYkp1DhBdRYVEFO5YAXL0GY8mEcAsdVgbOMJPvQcOsx0uVUPagVq4aewGwfXMzNAXv997AcAARl1hz6M1+A580svJtMadqNPD9d6GoqK6iaKECzMtsEaM5WmqyAjEHvhEnRDx7BBKQBNCqOYBLQbtEspXn6kJaUdFp5W4mZleFOcEG8sUP6nuQR+CCjXEeScxDWGlbILb1mBCFe40ccCR5Da84fo8lecuLJ2O/1fn/9R3Kb015Srr3Yvkn1hHnWWhphi/fuVhN7/f5e4vztB9eY+s1iz7FMAvv1k62yDJ5U4pBzZJ4Qu9gIedhQAacWVI3QZy6W+6+RWNvgVsPg6YxkFU2nMWygnjEuAhVi5OXXZ+A1PbTLilUuazlzVNzPTgNMZ+mV2Ctbtr45ZV+XpcFHSZYleKqO7y92hVjdKnjeguftaeWypRhKTBksnVDhz6h51Z7a1O3Bq5hE30jy/jhOnfwDWc6ELQB4nGNgZGBgAGL19A074/ltvjJwszCAwA2dqpUI+n8DCyNzA5DLwcAEEgUAIUMKBwB4nGNgZGBgbvjfwBDDAmQxMABJMI0EWAFHNwJweJxjYWBgYAFhRigNxAABDwAWAAAAAAAAAFAAsgDoAUx4nGNgZGBgYGVwAGIQYAJiLiBkYPgP5jMAAA+EAWEAAHicXZA9TsNAEIWfEycIR6IAgehYIUEBwvmhSxsp6VOkREqctZPI9pr1JlLOQsUJqFJxCio6zsLDHpp4vKNv3pvZsQzgHD/wUD+XPDV7aLKquYETXAs3GTfCPvlWuIUO7oTb1HvCAR7xLNzBBV7oef4pqwe8CnuceBNu4Azvwk3qH8I++SDcwhU+hduML+EAM3wLd3DvPQUjq+dOL9Vir9aRyWOTu4Aw1ck2nVsS35m25drkqh/2WE10ru3/TLlLBs7FKrYmU2MO6zQ1qrBmoyMXrpwrht1uLHoYmYyfMIKFxhyOeQmFBfbMa0QwyBFX2bGvVqbsSrBFygkrWp1ndCxKVn8TCn2E/Km1N6GXV/7xnhI73jeg6rhL8Vj2Z6SxbNbclZIVisrbUImoh1hVUwWG6DLio/6w2pz9AgpvXaAAeJxjYGKAAC4G7ICVkYmRmZGFkZWRjYElOSezgDkzN52ttCAnPzGFE8jUzclMzyhhYAAAjKYJLQA=') format('woff'), url('./fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 5 |   url('./fonts/iconfont.svg') format('svg');
 6 |   /* iOS 4.1- */
 7 | }
 8 | 
 9 | .ico {
10 |   font-family: "ico" !important;
11 |   font-size: 16px;
12 |   font-style: normal;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 | }
16 | 
17 | .ico-clip:before {
18 |   content: "\e62d";
19 | }
20 | 
21 | .ico-img:before {
22 |   content: "\e62f";
23 | }
24 | 
25 | .ico-upload:before {
26 |   content: "\e6a5";
27 | }
28 | 
29 | .ico-img-light:before {
30 |   content: "\e624";
31 | }


--------------------------------------------------------------------------------
/src/style/fonts/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="ico" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="ico"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="clip" unicode="&#58925;" d="M697.83 568.952l-64.952 64.922L308.07 309.13199999999995c-53.814-53.792-53.814-141.048 0-194.844 53.804-53.792 141.06-53.792 194.874 0l389.772 389.708c89.712 89.662 89.712 235.062 0 324.726-89.666 89.704-235.114 89.704-324.784 0L158.704 419.544c-0.29-0.304-0.612-0.576-0.876-0.846-125.102-125.096-125.102-327.856 0-452.906 125.054-125.056 327.868-125.056 452.988 0 0.274 0.274 0.516 0.566 0.82 0.876l0.032-0.034 279.332 279.292-64.986 64.92L546.682 31.583999999999946c-0.296-0.268-0.562-0.57-0.846-0.844-89.074-89.058-233.98-89.058-323.076 0-89.062 89.042-89.062 233.922 0 322.978 0.304 0.304 0.604 0.582 0.888 0.846l-0.046 0.06 409.28 409.166c53.71 53.738 141.142 53.738 194.884 0 53.712-53.734 53.712-141.148 0-194.84l-389.77-389.7c-17.936-17.922-47.054-17.922-64.972 0-17.894 17.886-17.894 47.032 0 64.92L697.83 568.952 697.83 568.952z"  horiz-adv-x="1024" />
24 | 
25 |     
26 |     <glyph glyph-name="img" unicode="&#58927;" d="M928.019692 800.019692L96.019692 800.019692C42.968615 800.019692 0 757.051077 0 704.039385l0-640c0-53.011692 42.968615-96.019692 96.019692-96.019692l832 0c53.011692 0 96.019692 43.008 96.019692 96.019692L1024.039385 704.039385C1024 757.051077 980.992 800.019692 928.019692 800.019692zM944.009846 161.988923l-200.861538 267.815385c0 0-11.657846 21.661538-52.657231 21.661538-46.513231 0-60.494769-20.992-60.494769-20.992l-175.931077-271.556923c0 0-9.570462-18.195692-33.043692-18.195692-24.576 0-36.312615 18.195692-36.312615 18.195692L292.194462 264.664615c0 0-23.709538 31.389538-54.508308 31.389538-30.680615 0-56.162462-34.737231-56.162462-34.737231l-101.533538-126.503385L79.990154 686.867692c0 17.644308 14.336 32.019692 32.019692 32.019692l800.019692 0c17.683692 0 32.019692-14.375385 32.019692-32.019692L944.049231 161.988923zM463.911385 512c0-62.621538-50.727385-113.348923-113.309538-113.348923-62.582154 0-113.348923 50.766769-113.348923 113.348923 0 62.542769 50.766769 113.309538 113.348923 113.309538C413.184 625.270154 463.911385 574.542769 463.911385 512z"  horiz-adv-x="1025" />
27 | 
28 |     
29 |     <glyph glyph-name="upload" unicode="&#59045;" d="M392.124284 533.1028759999999c0 0-54.16462 54.894238-127.652332 10.063193-65.750493-42.800805-54.122665-121.130801-54.122665-121.130801s-146.046261-29.915333-146.046261-186.859805c3.25616-156.690692 158.604274-158.297282 158.604274-158.297282l233.191016-0.252757L456.098317 244.38317199999995 344.280626 244.38317199999995l167.758772 167.747515L679.775656 244.38317199999995 567.937498 244.38317199999995 567.937498 76.62542399999995l226.425939 0.252757c0 0 144.56656-0.12689 164.883281 148.94324 9.661034 163.05361-139.745764 195.189518-139.745764 195.189518s16.997116 241.36314-192.811354 268.87882C446.839443 709.243549 392.124284 533.1028759999999 392.124284 533.1028759999999z"  horiz-adv-x="1024" />
30 | 
31 |     
32 |     <glyph glyph-name="img-light" unicode="&#58916;" d="M766.283 74.90599999999995h-508.566v101.712l152.571 254.284 208.934-254.284 147.061 101.714v-203.425zM766.283 405.474c0-42.117-34.22-76.286-76.285-76.286-42.117 0-76.286 34.17-76.286 76.286 0 42.115 34.17 76.285 76.286 76.285 42.066 0 76.285-34.169 76.285-76.285zM834.473 604.8779999999999c-17.679 24.086-42.262 52.246-69.283 79.216-27.015 27.018-55.178 51.651-79.216 69.281-41.023 30.048-60.89 33.523-72.26 33.523h-394.139c-35.066 0-63.573-28.507-63.573-63.571v-686.567c0-35.062 28.507-63.571 63.573-63.571h584.85c35.013 0 63.573 28.507 63.573 63.571v495.855c0 11.424-3.478 31.289-33.525 72.263zM729.183 648.137c24.436-24.435 43.558-46.388 57.659-64.665h-122.373v122.326c18.276-14.153 40.279-33.277 64.663-57.659h0.05zM817.139 36.761999999999944c0-6.905-5.809-12.715-12.715-12.715h-584.85c-6.907 0-12.717 5.809-12.717 12.715v686.565c0 6.854 5.809 12.715 12.717 12.715 0 0 394.038 0 394.139 0v-177.999c0-14.004 11.373-25.428 25.428-25.428h177.999v-495.854z"  horiz-adv-x="1024" />
33 | 
34 |     
35 | 
36 | 
37 |   </font>
38 | </defs></svg>
39 | 


--------------------------------------------------------------------------------
/README-CN.MD:
--------------------------------------------------------------------------------
  1 | <br>
  2 | 
  3 | <p align="center">
  4 |   <img width="300px" src="./src/assets/vip-logo.png" alt="vip" />
  5 | </p>
  6 | <br>
  7 | 
  8 | <p align="center">
  9 |   <img alt="GitHub release" src="https://img.shields.io/badge/release-v2.1.0-orange.svg?style=for-the-badge"/>
 10 |   <img alt="poi" src="https://img.shields.io/badge/poi-10-green.svg?style=for-the-badge"/>
 11 |   <img alt="Bili" src="https://img.shields.io/badge/bili-3-blue.svg?style=for-the-badge"/>
 12 | </p>
 13 | 
 14 | <br>
 15 | 
 16 | <p align="center">
 17 |   <b>
 18 |     <a href="https://segmentfault.com/a/1190000008503338">教程: 从0开始做一个文件选择(上传)组件</a>
 19 |     |
 20 |     <a href="http://waynecz.github.io/VueImgInputer/index.html">查看 Demo</a>
 21 |   </b>
 22 | </p>
 23 | 
 24 | <br>
 25 | 
 26 | ## 简介
 27 | 
 28 | - 就像 `<input type="file" />`，不支持多图片选择
 29 | - 支持自动上传功能
 30 | - 拖拽选择、预览、也可以当 `<img/>` 使用
 31 | - 两套主题，其他高度定制
 32 | 
 33 | <br>
 34 | 
 35 | ## 截图
 36 | 
 37 | <p align="center">
 38 |   <img height="180px" src="./src/assets/screenshot.gif"/>
 39 | </p>
 40 | 
 41 | <br>
 42 | 
 43 | ## 使用
 44 | 
 45 | ```bash
 46 | npm install vue-img-inputer
 47 | ```
 48 | 
 49 | ```javascript
 50 | import ImgInputer from 'vue-img-inputer'
 51 | import 'vue-img-inputer/dist/index.css'
 52 | 
 53 | Vue.component('ImgInputer', ImgInputer)
 54 | ```
 55 | 
 56 | ```html
 57 | <img-inputer v-model="file" theme="light" size="large"/>
 58 | ```
 59 | 
 60 | <br>
 61 | 
 62 | ## 接口
 63 | 
 64 | <details open><summary><strong><code>自动上传</code> 相关</strong></summary>
 65 | <br>
 66 | 
 67 | 1.  **`auto-upload`**: Boolean  
 68 |     设置开启自动上传功能
 69 | 
 70 | 2.  **`action`**: String  
 71 |     上传的 URL
 72 | 
 73 | 3.  **`upload-key`**: String  
 74 |     **default**: `file`  
 75 |     图片在 form-data 中的 key 名
 76 | 
 77 | 4.  **`extra-data`**: Object  
 78 |     上传的额外数据
 79 | 
 80 | 5.  **`headers`**: Object  
 81 |     上传的额外 headers
 82 | 
 83 | 6.  **`with-cookie`**: Boolean  
 84 |     是否携带 cookie
 85 | 
 86 | 7.  **`on-start`**: Function  
 87 |     **params**: func ( file )  
 88 |     上传开始的钩子函数
 89 | 
 90 | 8.  **`on-progress`**: Function  
 91 |     **params**: func ( event, file )  
 92 |     上传中的钩子函数，可以通过 `event.percent` 获得当前上传进度
 93 | 
 94 | 9.  **`on-success`**: Function  
 95 |     **params**: func ( res, file )  
 96 |     上传成功的钩子函数，`res` 是服务端返回的数据
 97 | 
 98 | 10. **`on-error`**: Function  
 99 |     **params**: func ( err, file )  
100 |     上传失败的钩子函数
101 | 
102 | <br/>
103 | </details>
104 | 
105 | <details><summary><strong><code>Input 标签</code> 相关</strong></summary>
106 | <br>
107 | 
108 | 1.  **`accept`**: String  
109 |     **default**: `image/*,video/*;`  
110 |     建议设置成像 `image/jpg,image/gif;` 之类的具体指，不然可能造成文件夹呼出特别慢
111 | 
112 | 2.  **`placeholder`**: String  
113 |     **default**: `点击或拖拽选择图片`
114 | 
115 | 3.  **`id`**: String  
116 |     **default**: random string in 4 length
117 | 
118 | 4.  **`readonly`**: Boolean
119 | 
120 | 5.  **`capture`**: Boolean  
121 |     **default**: `false`  
122 |     在移动端是否直接呼出相机
123 | 
124 | 6.  **`max-size`**: Number  
125 |     **default**: 5120  
126 |     图片大小限制 (KB)
127 | 
128 | 7.  **`name`**: Boolean  
129 |     原生 name 属性
130 | 
131 | 8.  **`任意 input 的原生属性`**: any  
132 |     任意 input 的原生属性都将继承给内部的 input 标签
133 | 
134 | <br/>
135 | </details>
136 | 
137 | <details><summary><strong><code>视觉 </code> 相关</strong></summary>
138 | <br>
139 | 
140 | 1.  **`img-src`**: String  
141 |     图片回填地址，设置后组件将会像 `<img />` 标签一样
142 | 
143 | 2.  **`theme`**: String  
144 |     **default**: `material`
145 |     两套主题 (light / material)
146 | 
147 | 3.  **`size`**: String
148 |     small / normal / large
149 | 
150 | 4.  **`icon`**: String  
151 |     clip / img / img2
152 | 
153 | 5.  **`ali-icon`**: String  
154 |     如果你用了 [iconfont.cn](http://iconfont.cn/), 可以设置你项目里的 icon unicode 值
155 | 
156 | 6.  **`no-mask`**: Boolean  
157 |     去除 hover 蒙版
158 | 
159 | 7.  **`no-hover-effect`**: Boolean  
160 |     去除所有 hover 效果
161 | 
162 | 8.  **`bottom-text`**: String  
163 |     **default**: `点击或拖拽图片以修改`  
164 |     hover 后底部的文字
165 | 
166 | 9.  **`readonly-tip-text`**: String  
167 |     **default**: `不可更改`  
168 |     只读情况下底部的文字
169 | 
170 | <br/>
171 | </details>
172 | 
173 | <details><summary><strong><code>事件</code></strong></summary>
174 | <br>
175 | 
176 | 1.  **`on-change`**: Function  
177 |     **params**: func ( file, fileName )  
178 |     文件更改时的钩子函数
179 | 
180 | 2.  **`onExceed`**: Function  
181 |     **params**: func ( file )  
182 |     文件超出最大设置时的钩子函数
183 | 
184 | <br/>
185 | </details>
186 | 
187 | <details><summary><strong><code>组件方法</code></strong></summary>
188 | <br>
189 | 
190 | 1.  **`reset`**  
191 |     重置组建的数据，但不重置 `img-src`
192 | 
193 | <br/>
194 | </details>
195 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <img class="logo" width="400" src="../src/assets/vip-logo.png">
  4 | 
  5 |     <Hello></Hello>
  6 | 
  7 |     <section class="wrapper">
  8 |       <div class="item">
  9 |         <ImgInputer
 10 |           v-model="file"
 11 |           accept="image/*"
 12 |           :maxSize="500"
 13 |           @onExceed="exceedHandler"
 14 |           @onChange="fileChange"
 15 |         ></ImgInputer>
 16 |         <h1>
 17 |           <code>default</code>
 18 |         </h1>
 19 |       </div>
 20 | 
 21 |       <div class="item">
 22 |         <ImgInputer
 23 |           auto-upload
 24 |           action="//jsonplaceholder.typicode.com/posts/"
 25 |           :on-error="onErr"
 26 |           v-model="file"
 27 |           accept="image/*.jpeg"
 28 |           @onChange="fileChange"
 29 |         ></ImgInputer>
 30 |         <h1>
 31 |           <code>auto-upload</code>
 32 |         </h1>
 33 |       </div>
 34 | 
 35 |       <div class="item">
 36 |         <ImgInputer v-model="file" accept="image/*" icon="img" @onChange="fileChange"></ImgInputer>
 37 |         <h1>
 38 |           <code>icon="img"</code>
 39 |         </h1>
 40 |       </div>
 41 | 
 42 |       <div class="item">
 43 |         <ImgInputer v-model="file" accept="image/*" theme="light" @onChange="fileChange"></ImgInputer>
 44 |         <h1>
 45 |           <code>theme="light"</code>
 46 |         </h1>
 47 |       </div>
 48 | 
 49 |       <div class="item">
 50 |         <ImgInputer v-model="file" accept="image/*" placeholder="请选择身份证" @onChange="fileChange"></ImgInputer>
 51 |         <h1>
 52 |           <code>placeholder="..."</code>
 53 |         </h1>
 54 |       </div>
 55 | 
 56 |       <div class="item">
 57 |         <ImgInputer v-model="file" accept="image/*" :imgSrc="cloudImg" @onChange="fileChange"></ImgInputer>
 58 |         <h1>
 59 |           <code>img-src="..."</code>
 60 |         </h1>
 61 |       </div>
 62 | 
 63 |       <div class="item">
 64 |         <ImgInputer
 65 |           v-model="file"
 66 |           accept="image/*"
 67 |           readonly
 68 |           imgSrc="https://images.unsplash.com/photo-1543868067-52959e8eef59?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80"
 69 |           @onChange="fileChange"
 70 |         ></ImgInputer>
 71 |         <h1>
 72 |           <code>readonly</code>
 73 |         </h1>
 74 |       </div>
 75 | 
 76 |       <div class="item">
 77 |         <ImgInputer
 78 |           v-model="file"
 79 |           accept="image/*"
 80 |           readonly
 81 |           noMask
 82 |           imgSrc="https://images.unsplash.com/photo-1468233748640-b31327627610?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=732&q=80"
 83 |           @onChange="fileChange"
 84 |         ></ImgInputer>
 85 |         <h1>
 86 |           <code>no-mask</code>
 87 |         </h1>
 88 |       </div>
 89 | 
 90 |       <div class="item">
 91 |         <ImgInputer v-model="file" accept="image/*" no-hover-effect @onChange="fileChange"></ImgInputer>
 92 |         <h1>
 93 |           <code>no-hover-effect</code>
 94 |         </h1>
 95 |       </div>
 96 | 
 97 |       <div class="item">
 98 |         <ImgInputer v-model="file" accept="image/*" size="small" @onChange="fileChange"></ImgInputer>
 99 |         <h1>
100 |           <code>size="small"</code>
101 |         </h1>
102 |       </div>
103 | 
104 |       <div class="item">
105 |         <ImgInputer v-model="file" accept="image/*" size="large" @onChange="fileChange"></ImgInputer>
106 |         <h1>
107 |           <code>size="large"</code>
108 |         </h1>
109 |       </div>
110 |     </section>
111 |   </div>
112 | </template>
113 | 
114 | <script>
115 | import Hello from "./components/Hello.vue";
116 | 
117 | export default {
118 |   name: "app",
119 | 
120 |   components: {
121 |     Hello
122 |   },
123 | 
124 |   data() {
125 |     return {
126 |       file: null,
127 |       cloudImg: ""
128 |     };
129 |   },
130 | 
131 |   mounted() {
132 |     setTimeout(() => {
133 |       this.cloudImg =
134 |         "https://images.unsplash.com/photo-1519734019-1cc9bdc4f806?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80";
135 |     }, 2000);
136 |   },
137 | 
138 |   methods: {
139 |     fileChange(file, name) {
140 |       console.log("File --> ", file);
141 |       console.log("FileName -->", name);
142 |     },
143 | 
144 |     onErr(err, file) {
145 |       console.log("​onErr -> file", file);
146 |       console.log("​onErr -> err", err);
147 |     },
148 | 
149 |     exceedHandler(file) {
150 |       console.warn("onExceed -> file", file);
151 |     }
152 |   }
153 | };
154 | </script>
155 | 
156 | <style>
157 | #app {
158 |   font-family: Avenir, Helvetica, Arial, sans-serif;
159 |   -webkit-font-smoothing: antialiased;
160 |   -moz-osx-font-smoothing: grayscale;
161 |   text-align: center;
162 |   color: #2c3e50;
163 |   margin-top: 60px;
164 |   padding-bottom: 100px;
165 | }
166 | 
167 | .test-inputer {
168 |   margin-top: 50px;
169 | }
170 | 
171 | code {
172 |   background: #35495e;
173 |   padding: 5px 20px;
174 |   display: inline-block;
175 |   color: #ffeb59;
176 |   font-size: 28px;
177 |   line-height: 1.5;
178 |   border-radius: 5px;
179 | }
180 | 
181 | h1,
182 | h2 {
183 |   font-weight: 400;
184 | }
185 | 
186 | ul {
187 |   list-style-type: none;
188 |   padding: 0;
189 | }
190 | 
191 | li {
192 |   display: inline-block;
193 |   margin: 0 10px;
194 | }
195 | 
196 | a {
197 |   color: #42b983;
198 | }
199 | 
200 | .img-inputer {
201 |   margin-top: 60px;
202 | }
203 | 
204 | .wrapper {
205 |   width: 800px;
206 |   margin: 0 auto;
207 |   display: flex;
208 |   flex-flow: row wrap;
209 | }
210 | 
211 | .item {
212 |   flex: 1 50%;
213 |   display: flex;
214 |   flex-flow: column;
215 |   align-items: center;
216 | }
217 | </style>
218 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <br>
  2 | 
  3 | <p align="center">
  4 |   <img width="300px" src="./src/assets/vip-logo.png" alt="vip" />
  5 | </p>
  6 | <br>
  7 | 
  8 | <p align="center">
  9 |   <img alt="GitHub release" src="https://img.shields.io/badge/release-v2.1.0-orange.svg?style=for-the-badge"/>
 10 |   <img alt="poi" src="https://img.shields.io/badge/poi-10-green.svg?style=for-the-badge"/>
 11 |   <img alt="Bili" src="https://img.shields.io/badge/bili-3-blue.svg?style=for-the-badge"/>
 12 | </p>
 13 | 
 14 | <br>
 15 | 
 16 | <p align="center">
 17 |   <b>
 18 |     <a href="https://github.com/waynecz/vue-img-inputer/blob/master/README-CN.MD">点击查看中文文档</a>
 19 |     |
 20 |     <a href="http://waynecz.github.io/VueImgInputer/index.html">Have a glance at Demo</a>
 21 |   </b>
 22 | </p>
 23 | 
 24 | <br>
 25 | 
 26 | ## Intro
 27 | 
 28 | - `<input type="file" />` like, only support single image
 29 | - auto-upload support
 30 | - drop-select / preview / use as `<img />` as well
 31 | - optional skins
 32 | 
 33 | <br>
 34 | 
 35 | ## Screenshots
 36 | 
 37 | <p align="center">
 38 |   <img height="180px" src="./src/assets/screenshot.gif"/>
 39 | </p>
 40 | 
 41 | <br>
 42 | 
 43 | ## Install and Usage
 44 | 
 45 | ```bash
 46 | npm install vue-img-inputer
 47 | ```
 48 | 
 49 | ```javascript
 50 | import ImgInputer from 'vue-img-inputer'
 51 | import 'vue-img-inputer/dist/index.css'
 52 | 
 53 | Vue.component('ImgInputer', ImgInputer)
 54 | ```
 55 | 
 56 | ```html
 57 | <img-inputer v-model="file" theme="light" size="large"/>
 58 | ```
 59 | 
 60 | <br>
 61 | 
 62 | ## API
 63 | 
 64 | <details open><summary><strong><code>Auto upload</code> related</strong></summary>
 65 | <br>
 66 | 
 67 | 1.  **`auto-upload`**: Boolean  
 68 |     set to enable auto-upload
 69 | 
 70 | 2.  **`action`**: String  
 71 |     request URL
 72 | 
 73 | 3.  **`upload-key`**: String  
 74 |     **default**: `file`  
 75 |     key name in form-data
 76 | 
 77 | 4.  **`extra-data`**: Object  
 78 |     extra data been appended in request's form-data
 79 | 
 80 | 5.  **`headers`**: Object  
 81 |     additional headers of request
 82 | 
 83 | 6.  **`with-cookie`**: Boolean  
 84 |     whether cookies will been sent
 85 | 
 86 | 7.  **`on-start`**: Function  
 87 |     **params**: func ( file )  
 88 |     hook function when upload start
 89 | 
 90 | 8.  **`on-progress`**: Function  
 91 |     **params**: func ( event, file )  
 92 |     hook function when uploading, get progress by `event.percent`
 93 | 
 94 | 9.  **`on-success`**: Function  
 95 |     **params**: func ( res, file )  
 96 |     hook function when upload success, `res` is response from server
 97 | 
 98 | 10. **`on-error`**: Function  
 99 |     **params**: func ( err, file )  
100 |     hook function when upload failed
101 | 
102 | <br/>
103 | </details>
104 | 
105 | <details><summary><strong><code>Input tag</code> related</strong></summary>
106 | <br>
107 | 
108 | 1.  **`accept`**: String  
109 |     **default**: `image/*,video/*;`  
110 |     suggest to set a specific value like `image/jpg,image/gif;` for wildcard will lead to a serious delay
111 | 
112 | 2.  **`placeholder`**: String  
113 |     **default**: `Drop file here or click`
114 | 
115 | 3.  **`id`**: String  
116 |     **default**: random string in 4 length  
117 |     id of input tag
118 | 
119 | 4.  **`readonly`**: Boolean
120 | 
121 | 5.  **`capture`**: Boolean  
122 |     **default**: `false`  
123 |     whether use camera directly in mobile
124 | 
125 | 6.  **`max-size`**: Number  
126 |     **default**: 5120  
127 |     max-size of image (KB)
128 | 
129 | 7.  **`name`**: Boolean  
130 |     name of input tag
131 | 
132 | 8.  **`any input's attribute`**  
133 |     any input's original attributes set on component will be inherited by inner input tag
134 | 
135 | <br/>
136 | </details>
137 | 
138 | <details><summary><strong><code>UI</code> related</strong></summary>
139 | <br>
140 | 
141 | 1.  **`img-src`**: String  
142 |     image resource let component behavior like `<img />`
143 | 
144 | 2.  **`theme`**: String  
145 |     **default**: `material`
146 |     two themes optional (light / material)
147 | 
148 | 3.  **`size`**: String
149 |     small / normal / large
150 | 
151 | 4.  **`icon`**: String  
152 |     clip / img / img2
153 | 
154 | 5.  **`ali-icon`**: String  
155 |     if you use [iconfont.cn](http://iconfont.cn/), set unicode of any icon to custom
156 | 
157 | 6.  **`no-mask`**: Boolean  
158 |     remove mask when hover
159 | 
160 | 7.  **`no-hover-effect`**: Boolean  
161 |     remove all hover effect (include text) when hover
162 | 
163 | 8.  **`bottom-text`**: String  
164 |     **default**: `Drop file here or click to change`  
165 |     text in the bottom when hover
166 | 
167 | 9.  **`no-multiple-text`**: String  
168 |     **default**: `Not support multiple files`  
169 |     visible only the state is `readonly`, cover bottom-text
170 | 
171 | 10.  **`exceed-size-text`**: String  
172 |     **default**: `The size of file should less than: ${maxSize}`  
173 |     visible only the state is `readonly`, cover bottom-text
174 | 
175 | 11.  **`no-action-text`**: String  
176 |     **default**: `Action hasn't set up yet`  
177 |     visible only the state is `readonly`, cover bottom-text
178 | 
179 | 12.  **`readonly-tip-text`**: String  
180 |     **default**: `Readonly`  
181 |     visible only the state is `readonly`, cover bottom-text
182 | 
183 | <br/>
184 | </details>
185 | 
186 | <details><summary><strong><code>Events</code></strong></summary>
187 | <br>
188 | 
189 | 1.  **`onChange`**: Function  
190 |     **params**: func ( file, fileName )  
191 |     hook function when file selected
192 | 
193 | 2.  **`onExceed`**: Function  
194 |     **params**: func ( file )  
195 |     hook function when file exceed max-size
196 | 
197 | <br/>
198 | </details>
199 | 
200 | <details><summary><strong><code>Methods</code></strong></summary>
201 | <br>
202 | 
203 | 1.  **`reset`**  
204 |     reset componet but will not clear `img-src`
205 | 
206 | <br/>
207 | </details>
208 | 


--------------------------------------------------------------------------------
/src/style/index.scss:
--------------------------------------------------------------------------------
  1 | @import './iconfont';
  2 | 
  3 | .img-inputer {
  4 |   position: relative;
  5 |   display: inline-block;
  6 |   width: 260px;
  7 |   height: 150px;
  8 |   border-radius: 5px;
  9 |   background: #f0f0f0;
 10 |   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);
 11 |   transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 12 | 
 13 |   &--small {
 14 |     width: 160px;
 15 |     height: 100px;
 16 | 
 17 |     .img-inputer__placeholder {
 18 |       font-size: 12px;
 19 |       top: 65%;
 20 |     }
 21 |     .img-inputer__icon {
 22 |       font-size: 28px !important;
 23 |       top: 38%;
 24 |     }
 25 |   }
 26 | 
 27 |   &--large {
 28 |     width: 460px;
 29 |     height: 250px;
 30 |   }
 31 | 
 32 |   &:hover {
 33 |     transform: scale(1.015);
 34 |     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
 35 |       0 2px 4px -1px rgba(0, 0, 0, 0.3);
 36 |   }
 37 | 
 38 |   &.nhe:hover {
 39 |     transform: scale(1);
 40 |     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);
 41 |   }
 42 | 
 43 |   &--light {
 44 |     background: #fbfdff;
 45 |     border: 1px solid #97a8be;
 46 |     box-shadow: none;
 47 | 
 48 |     .img-inputer__icon {
 49 |       color: #97a8be;
 50 |     }
 51 | 
 52 |     &:hover {
 53 |       transform: scale(1);
 54 |       box-shadow: none;
 55 |       border-color: #20a0ff;
 56 |     }
 57 |   }
 58 | 
 59 |   &--loading {
 60 |     overflow: hidden;
 61 | 
 62 |     &:hover {
 63 |       transform: scale(1);
 64 |       box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);
 65 |     }
 66 |   }
 67 | 
 68 |   &__loading {
 69 |     position: absolute;
 70 |     width: 100%;
 71 |     height: 100%;
 72 |     z-index: 11;
 73 |     background: mix(black, transparent, 50);
 74 | 
 75 |     &-indicator {
 76 |       position: absolute;
 77 |       z-index: 2;
 78 |       top: 13px;
 79 |       left: 13px;
 80 |       border-radius: 50%;
 81 |       width: 10px;
 82 |       height: 10px;
 83 |       border: 2px solid #fff;
 84 |       border-left-color: transparent;
 85 |       animation: vip-spin 0.5s linear infinite;
 86 |     }
 87 | 
 88 |     &-process {
 89 |       width: 100%;
 90 |       height: 100%;
 91 |       background: mix(#00ffc2, transparent, 26);
 92 |       transform: translate3d(-100%, 0, 0);
 93 |       transition: 0.1s linear;
 94 |     }
 95 |   }
 96 | 
 97 |   &__state {
 98 |     position: absolute;
 99 |     top: 13px;
100 |     left: 13px;
101 |     border-radius: 50%;
102 |     width: 16px;
103 |     z-index: 2;
104 |     height: 16px;
105 | 
106 |     &.success {
107 |       background: rgb(16, 201, 77);
108 | 
109 |       &::after {
110 |         position: absolute;
111 |         content: '';
112 |         top: 5px;
113 |         left: 3px;
114 |         width: 10px;
115 |         height: 5px;
116 |         box-shadow: 4px 0 0 -2px #fff inset, 0 -4px 0 -2px #fff inset;
117 |         transform: translateY(-0.5px) rotate(-45deg);
118 |       }
119 |     }
120 | 
121 |     &.fail {
122 |       background: #e55;
123 |       &::after,
124 |       &::before {
125 |         position: absolute;
126 |         content: '';
127 |         display: block;
128 |         width: 8px;
129 |         height: 2px;
130 |         background: #fff;
131 |         top: 50%;
132 |         left: 50%;
133 |       }
134 | 
135 |       &::before {
136 |         transform: translate(-50%, -50%) rotate(45deg);
137 |       }
138 | 
139 |       &::after {
140 |         transform: translate(-50%, -50%) rotate(-45deg);
141 |       }
142 |     }
143 |   }
144 | 
145 |   > i {
146 |     position: absolute;
147 |     font-size: 34px !important;
148 |     left: 50%;
149 |     top: 40%;
150 |     color: #757575;
151 |     transform: translate(-50%, -50%);
152 |   }
153 | 
154 |   &__placeholder {
155 |     position: absolute;
156 |     margin: 0;
157 |     font-size: 14px;
158 |     width: 100%;
159 |     color: #aaa;
160 |     top: 62%;
161 |     text-align: center;
162 |   }
163 | 
164 |   &__preview-box {
165 |     position: absolute;
166 |     top: 0;
167 |     bottom: 0;
168 |     left: 0;
169 |     right: 0;
170 |     border-radius: 5px;
171 |     overflow: hidden;
172 |     background: #333;
173 |   }
174 | 
175 |   &__preview-img {
176 |     position: relative;
177 |     top: 0;
178 |     z-index: 2;
179 |     width: 100%;
180 |   }
181 | 
182 |   &__label {
183 |     position: absolute;
184 |     top: 0;
185 |     left: 0;
186 |     bottom: 0;
187 |     right: 0;
188 |     z-index: 10;
189 |     cursor: pointer;
190 |     margin-bottom: 0;
191 | 
192 |     &:hover {
193 |       ~ .img-inputer__mask {
194 |         display: block;
195 |       }
196 |     }
197 |   }
198 | 
199 |   &__inputer {
200 |     position: absolute;
201 |     left: -9999px;
202 |   }
203 | 
204 |   &__mask {
205 |     display: none;
206 |     position: absolute;
207 |     z-index: 9;
208 |     top: 0;
209 |     left: 0;
210 |     right: 0;
211 |     bottom: 0;
212 |     border-radius: 5px;
213 |     text-align: center;
214 |     background: rgba(0, 0, 0, 0.22);
215 |   }
216 | 
217 |   &__file-name {
218 |     color: white;
219 |     font-size: 13px;
220 |     padding-top: 10px;
221 |     margin: 0;
222 |     display: inline-block;
223 |     max-width: 90%;
224 |     text-overflow: ellipsis;
225 |     white-space: nowrap;
226 |     overflow: hidden;
227 |   }
228 | 
229 |   &__change {
230 |     position: absolute;
231 |     bottom: 0;
232 |     margin: 0;
233 |     font-size: 12px;
234 |     border-radius: 0 0 5px 5px;
235 |     background: rgba(0, 0, 0, 0.7);
236 |     text-align: center;
237 |     color: white;
238 |     width: 100%;
239 |     padding: 9px 0;
240 |   }
241 | 
242 |   &__err {
243 |     color: #e55;
244 |     font-size: 12px;
245 |     position: absolute;
246 |     bottom: -28px;
247 |     width: 100%;
248 |   }
249 | }
250 | 
251 | @keyframes vip-spin {
252 |   to {
253 |     transform: rotate(360deg);
254 |   }
255 | }
256 | 
257 | .vip-move-in {
258 |   &-enter-active,
259 |   &-leave-active {
260 |     transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
261 |     will-change: trnsform;
262 |   }
263 |   &-enter,
264 |   &-leave-active {
265 |     opacity: 0;
266 |     transform: translateX(30%);
267 |   }
268 | }
269 | 
270 | .vip-zoom-in {
271 |   &-enter-active,
272 |   &-leave-active {
273 |     transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
274 | 
275 |     will-change: trnsform;
276 |   }
277 |   &-enter,
278 |   &-leave-active {
279 |     transform: scale(0);
280 |   }
281 | }
282 | 
283 | .vip-fade {
284 |   &-enter-active,
285 |   &-leave-active {
286 |     transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
287 |     will-change: opacity;
288 |   }
289 |   &-enter,
290 |   &-leave-active {
291 |     opacity: 0;
292 |   }
293 | }
294 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="img-inputer"
  4 |     :class="[
  5 |       themeClass,
  6 |       sizeClass,
  7 |       nhe || noHoverEffect ? 'nhe' : '',
  8 |       { 'img-inputer--loading': uploading }
  9 |     ]"
 10 |     ref="box"
 11 |   >
 12 |     <i
 13 |       v-if="ICON && !customIconClass"
 14 |       class="img-inputer__icon"
 15 |       :class="`ico ico-${ICON}`"
 16 |     />
 17 |     <i
 18 |       v-if="customIconClass"
 19 |       class="img-inputer__icon"
 20 |       :class="customIconClass"
 21 |     />
 22 |     <slot
 23 |       v-if="!icon && !customIconClass"
 24 |       name="icon"
 25 |     />
 26 |     <p class="img-inputer__placeholder">{{placeholder}}</p>
 27 | 
 28 |     <div
 29 |       class="img-inputer__preview-box"
 30 |       v-if="imgSelected"
 31 |     >
 32 |       <img
 33 |         :src="dataUrl"
 34 |         class="img-inputer__preview-img"
 35 |       >
 36 |     </div>
 37 |     <label
 38 |       :for="readonly ? '' : inputId"
 39 |       class="img-inputer__label"
 40 |     />
 41 | 
 42 |     <transition name="vip-fade">
 43 |       <div
 44 |         class="img-inputer__loading"
 45 |         v-if="uploading"
 46 |       >
 47 |         <div class="img-inputer__loading-indicator" />
 48 |         <div
 49 |           class="img-inputer__loading-process"
 50 |           :style="processStyle"
 51 |         />
 52 |       </div>
 53 |     </transition>
 54 | 
 55 |     <transition name="vip-zoom-in">
 56 |       <div
 57 |         v-if="autoUpload && uploaded"
 58 |         class="img-inputer__state success"
 59 |       />
 60 |     </transition>
 61 | 
 62 |     <transition name="vip-zoom-in">
 63 |       <div
 64 |         v-if="autoUpload && uploadFailed"
 65 |         class="img-inputer__state fail"
 66 |       />
 67 |     </transition>
 68 | 
 69 |     <!-- Mask -->
 70 |     <div
 71 |       class="img-inputer__mask"
 72 |       v-if="imgSelected && !noMask"
 73 |     >
 74 |       <p class="img-inputer__file-name">{{fileName}}</p>
 75 |       <p
 76 |         class="img-inputer__change"
 77 |         v-if="readonly"
 78 |       >{{readonlyTipText}}</p>
 79 |       <p
 80 |         class="img-inputer__change"
 81 |         v-else
 82 |       >{{bottomText}}</p>
 83 |     </div>
 84 | 
 85 |     <input
 86 |       v-if="capture"
 87 |       ref="inputer"
 88 |       type="file"
 89 |       v-bind="$attrs"
 90 |       :name="name"
 91 |       :id="inputId"
 92 |       :accept="accept"
 93 |       capture="video"
 94 |       class="img-inputer__inputer"
 95 |       @change="handleFileChange"
 96 |     />
 97 | 
 98 |     <!-- Alternative for no capture-->
 99 |     <input
100 |       v-else
101 |       ref="inputer"
102 |       type="file"
103 |       v-bind="$attrs"
104 |       :name="name"
105 |       :id="inputId"
106 |       :accept="accept"
107 |       class="img-inputer__inputer"
108 |       @change="handleFileChange"
109 |     />
110 |     <transition name="vip-move-in">
111 |       <div
112 |         class="img-inputer__err"
113 |         v-if="errText.length"
114 |       >{{errText}}</div>
115 |     </transition>
116 |   </div>
117 | </template>
118 | 
119 | <script>
120 | /* eslint-disable */
121 | import ajax from "./ajax";
122 | 
123 | const isZhCN = _ =>
124 |   (navigator.language || navigator.browserLanguage).includes("zh");
125 | 
126 | const lang = isZhCN ? "zh" : "en";
127 | 
128 | const TRANSLATIONS = {
129 |   readonlyTipText: { zh: "不可更改", en: "Readonly" },
130 |   bottomText: {
131 |     zh: "点击或拖拽图片以修改",
132 |     en: "Drop file here or click to change"
133 |   },
134 |   hoverText: {
135 |     zh: "点击或拖拽图片以修改",
136 |     en: "Drop file here or click to change"
137 |   },
138 |   placeholder: {
139 |     zh: "点击或拖拽选择图片",
140 |     en: "Drop file here or click"
141 |   },
142 |   noMultipleFileMsg: { zh: "不支持多文件", en: "Not support multiple files" },
143 |   exceedSizeMsg: {
144 |     zh: "文件大小不能超过",
145 |     en: "The size of file should less than: "
146 |   },
147 |   noActionUrlMsg: {
148 |     zh: "上传地址未配置",
149 |     en: "Action hasn't set up yet"
150 |   }
151 | };
152 | 
153 | export default {
154 |   name: "VueImgInputer",
155 | 
156 |   // !------------------------ P r o p s --------------------------------------------------------
157 |   props: {
158 |     type: {
159 |       default: "img",
160 |       type: String
161 |     },
162 |     accept: {
163 |       default: "image/*,video/*",
164 |       type: String
165 |     },
166 |     capture: {
167 |       default: false,
168 |       type: Boolean
169 |     },
170 |     id: {
171 |       default: "",
172 |       type: String
173 |     },
174 |     onChange: {
175 |       default: null,
176 |       type: Function
177 |     },
178 |     readonly: {
179 |       type: Boolean,
180 |       default: false
181 |     },
182 |     noMultipleText: {
183 |       default: TRANSLATIONS.noMultipleFileMsg[lang],
184 |       type: String
185 |     },
186 |     exceedSizeText: {
187 |       default: TRANSLATIONS.exceedSizeMsg[lang],
188 |       type: String
189 |     },
190 |     noActionText: {
191 |       default: TRANSLATIONS.noActionUrlMsg[lang],
192 |       type: String
193 |     },
194 |     readonlyTipText: {
195 |       default: TRANSLATIONS.readonlyTipText[lang],
196 |       type: String
197 |     },
198 |     bottomText: {
199 |       default: TRANSLATIONS.bottomText[lang],
200 |       type: String
201 |     },
202 |     hoverText: {
203 |       default: TRANSLATIONS.hoverText[lang],
204 |       type: String
205 |     },
206 |     placeholder: {
207 |       default: TRANSLATIONS.placeholder[lang],
208 |       type: String
209 |     },
210 |     value: {
211 |       default: undefined
212 |     },
213 |     icon: {
214 |       default: "",
215 |       type: String
216 |     },
217 |     aliIcon: {
218 |       default: "",
219 |       type: String
220 |     },
221 |     customIconClass: {
222 |       default: "",
223 |       type: String
224 |     },
225 |     maxSize: {
226 |       default: 5120,
227 |       type: Number
228 |     },
229 |     size: {
230 |       default: "",
231 |       type: String
232 |     },
233 |     imgSrc: {
234 |       default: "",
235 |       type: String
236 |     },
237 | 
238 |     // ! Deprecated, use noHoverEffect instead
239 |     nhe: {
240 |       type: Boolean,
241 |       default: false
242 |     },
243 |     noHoverEffect: {
244 |       type: Boolean,
245 |       default: false
246 |     },
247 |     noMask: {
248 |       type: Boolean,
249 |       default: false
250 |     },
251 |     theme: {
252 |       type: String,
253 |       default: ""
254 |     },
255 |     name: {
256 |       type: String,
257 |       default: "file"
258 |     },
259 | 
260 |     // 文件自动上传功能抄自 Element/Uploader:
261 |     autoUpload: {
262 |       type: Boolean,
263 |       default: false
264 |     },
265 |     action: {
266 |       type: String,
267 |       default: undefined
268 |     },
269 |     uploadKey: {
270 |       type: String,
271 |       default: "file"
272 |     },
273 |     extraData: {
274 |       type: Object,
275 |       default: () => {}
276 |     },
277 |     headers: {
278 |       type: Object,
279 |       default: () => {}
280 |     },
281 |     withCookie: {
282 |       type: Boolean,
283 |       default: false
284 |     },
285 |     onStart: {
286 |       default: () => {},
287 |       type: Function
288 |     },
289 |     onProgress: {
290 |       default: () => {},
291 |       type: Function
292 |     },
293 |     onSuccess: {
294 |       default: () => {},
295 |       type: Function
296 |     },
297 |     onError: {
298 |       default: () => {},
299 |       type: Function
300 |     }
301 |   },
302 | 
303 |   // !------------------------ D a t a --------------------------------------------------------
304 |   data() {
305 |     return {
306 |       inputId: "",
307 |       file: null,
308 |       dataUrl: "",
309 |       fileName: "",
310 |       errText: "",
311 | 
312 |       uploading: false,
313 |       uploadPercent: 0,
314 |       uploaded: false,
315 |       uploadFailed: false
316 |     };
317 |   },
318 | 
319 |   // !------------------------ C o m p u t e d --------------------------------------------------------
320 |   computed: {
321 |     imgSelected() {
322 |       return !!this.dataUrl || !!this.fileName;
323 |     },
324 | 
325 |     sizeHumanRead() {
326 |       let rst = 0;
327 |       if (this.maxSize < 1024) {
328 |         rst = this.maxSize + "K";
329 |       } else {
330 |         rst =
331 |           (this.maxSize / 1024).toFixed(this.maxSize % 1024 > 0 ? 2 : 0) + "M";
332 |       }
333 |       return rst;
334 |     },
335 | 
336 |     sizeClass() {
337 |       if (this.size) {
338 |         return `img-inputer--${this.size}`;
339 |       }
340 |     },
341 | 
342 |     themeClass() {
343 |       return `img-inputer--${this.theme}`;
344 |     },
345 | 
346 |     ICON() {
347 |       let rst = "";
348 |       const { theme, icon, autoUpload } = this;
349 | 
350 |       if (icon) {
351 |         rst = icon;
352 |       } else {
353 |         rst = theme === "light" ? "img-light" : autoUpload ? "upload" : "clip";
354 |       }
355 |       return rst;
356 |     },
357 | 
358 |     processStyle() {
359 |       const { uploadPercent } = this;
360 |       return {
361 |         transform: `translate3d(${uploadPercent - 100}%, 0, 0)`
362 |       };
363 |     }
364 |   },
365 | 
366 |   // !------------------------ L i f e   c i r c l e --------------------------------------------------------
367 |   mounted() {
368 |     this.inputId = this.id || this.gengerateID();
369 | 
370 |     if (this.imgSrc) {
371 |       this.dataUrl = this.imgSrc;
372 |     }
373 | 
374 |     // 阻止浏览器默认的拖拽时事件
375 |     ["dragleave", "drop", "dragenter", "dragover"].forEach(e => {
376 |       this.preventDefaultEvent(e);
377 |     });
378 | 
379 |     // 绑定拖拽支持
380 |     this.addDropSupport();
381 |   },
382 | 
383 |   // !------------------------ M e t h o d s --------------------------------------------------------
384 |   methods: {
385 |     preventDefaultEvent(eventName) {
386 |       document.addEventListener(
387 |         eventName,
388 |         function(e) {
389 |           e.preventDefault();
390 |         },
391 |         false
392 |       );
393 |     },
394 | 
395 |     addDropSupport() {
396 |       let BOX = this.$refs.box;
397 | 
398 |       BOX.addEventListener("drop", e => {
399 |         e.preventDefault();
400 |         if (this.readonly) return false;
401 |         this.errText = "";
402 |         let fileList = e.dataTransfer.files;
403 | 
404 |         if (fileList.length === 0) {
405 |           return false;
406 |         }
407 | 
408 |         if (fileList.length > 1) {
409 |           this.errText = this.noMultipleText;
410 |           return false;
411 |         }
412 | 
413 |         this.handleFileChange(fileList);
414 |       });
415 |     },
416 | 
417 |     gengerateID() {
418 |       let nonstr = Math.random()
419 |         .toString(36)
420 |         .substring(3, 8);
421 |       if (!document.getElementById(nonstr)) {
422 |         return nonstr;
423 |       } else {
424 |         return this.gengerateID();
425 |       }
426 |     },
427 | 
428 |     handleFileChange(e) {
429 |       if (typeof e.target === "undefined") this.file = e[0];
430 |       else this.file = e.target.files[0];
431 | 
432 |       this.errText = "";
433 |       let size = Math.floor(this.file.size / 1024);
434 |       if (size > this.maxSize) {
435 |         this.errText = `${this.exceedSizeText}${this.sizeHumanRead}`;
436 |         this.$emit("onExceed", this.file);
437 |         return false;
438 |       }
439 | 
440 |       // 双向绑定
441 |       this.$emit("input", this.file);
442 | 
443 |       if (this.autoUpload) this.uploadFile();
444 | 
445 |       this.onChange && this.onChange(this.file, this.file.name);
446 |       this.$emit("onChange", this.file, this.file.name);
447 | 
448 |       this.imgPreview(this.file);
449 | 
450 |       this.fileName = this.file.name;
451 | 
452 |       this.resetInput();
453 |     },
454 | 
455 |     imgPreview(file) {
456 |       let self = this;
457 | 
458 |       if (!file || !window.FileReader) return;
459 | 
460 |       if (/^image/.test(file.type)) {
461 |         let reader = new FileReader();
462 |         reader.readAsDataURL(file);
463 | 
464 |         reader.onloadend = function() {
465 |           self.dataUrl = this.result;
466 |         };
467 |       }
468 |     },
469 | 
470 |     resetInput() {
471 |       let input = document.getElementById(this.inputId);
472 |       let form = document.createElement("form");
473 | 
474 |       document.body.appendChild(form);
475 | 
476 |       let parentNode = input.parentNode;
477 |       // 判断input 是否为最后一个节点
478 |       let isLastNode = parentNode.lastChild === input;
479 |       let nextSibling;
480 | 
481 |       // 如果后面还有节点，则记录下一个node，做位置标志
482 |       // 如果本身已经是最后一个节点，则直接通过parentNode appendChild即可
483 |       if (!isLastNode) {
484 |         nextSibling = input.nextSibling;
485 |       }
486 | 
487 |       form.appendChild(input);
488 |       form.reset();
489 | 
490 |       isLastNode
491 |         ? parentNode.appendChild(input)
492 |         : parentNode.insertBefore(input, nextSibling);
493 | 
494 |       document.body.removeChild(form);
495 |     },
496 | 
497 |     uploadFile() {
498 |       const { onStart, file } = this;
499 |       if (!this.action) {
500 |         this.errText = this.noActionText;
501 |         return;
502 |       }
503 | 
504 |       onStart && onStart(file);
505 | 
506 |       this.post(file);
507 |     },
508 | 
509 |     post(file) {
510 |       const { headers, withCookie, extraData, uploadKey, action } = this;
511 |       this.uploading = true;
512 | 
513 |       const options = {
514 |         headers: headers,
515 |         withCredentials: withCookie,
516 |         file,
517 |         data: extraData,
518 |         filename: uploadKey,
519 |         action,
520 | 
521 |         onProgress: e => {
522 |           this.uploadPercent = ~~e.percent;
523 |           this.onProgress(e, file);
524 |         },
525 | 
526 |         onSuccess: res => {
527 |           this.uploadPercent = 0;
528 |           this.uploading = false;
529 |           this.uploaded = true;
530 |           this.onSuccess(res, file);
531 |         },
532 | 
533 |         onError: err => {
534 |           this.uploadPercent = 0;
535 |           this.uploading = false;
536 |           this.uploadFailed = true;
537 |           this.onError(err, file);
538 |         }
539 |       };
540 | 
541 |       ajax(options);
542 |     },
543 | 
544 |     reset() {
545 |       this.file = null;
546 |       this.dataUrl = "";
547 |       this.errText = "";
548 |       this.fileName = "";
549 |       this.uploadPercent = 0;
550 |       this.uploading = false;
551 |       this.uploaded = false;
552 |       this.uploadFailed = false;
553 |     }
554 |   },
555 | 
556 |   // !------------------------ W a t c h --------------------------------------------------------
557 |   watch: {
558 |     imgSrc(newval) {
559 |       this.dataUrl = newval;
560 | 
561 |       if (!newval) {
562 |         this.file = null;
563 |         this.errText = "";
564 |         this.fileName = "";
565 |       }
566 |     },
567 | 
568 |     value(newval, oldval) {
569 |       // reset
570 |       if (oldval && !newval) {
571 |         this.reset();
572 |       }
573 |     }
574 |   }
575 | };
576 | </script>
577 | 


--------------------------------------------------------------------------------