├── babel.config.js
├── public
├── favicon.ico
└── index.html
├── src
├── assets
│ ├── images
│ │ ├── ic_pic.png
│ │ └── ic_pic_upload.png
│ └── style
│ │ └── common.css
├── main.js
├── App.vue
└── components
│ └── photograph.vue
├── .gitignore
├── vue.config.js
├── README.md
└── package.json
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Leo-July/upload-photo/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/assets/images/ic_pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Leo-July/upload-photo/HEAD/src/assets/images/ic_pic.png
--------------------------------------------------------------------------------
/src/assets/images/ic_pic_upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Leo-July/upload-photo/HEAD/src/assets/images/ic_pic_upload.png
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | Vue.config.productionTip = false
5 |
6 | new Vue({
7 | render: h => h(App),
8 | }).$mount('#app')
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // https://cli.vuejs.org/config/
3 | module.exports = {
4 | productionSourceMap: true,
5 | publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
6 | devServer: {
7 | proxy: {
8 | '/api.apiopen.top': {
9 | target: 'https://api.apiopen.top',
10 | changeOrigin: true,
11 | pathRewrite: {
12 | '^/api.apiopen.top': '/',
13 | },
14 | },
15 | },
16 | before: app => {
17 | // app is an express instance
18 | },
19 | },
20 |
21 | lintOnSave: true,
22 | }
23 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | upload-photo
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
27 |
28 |
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # upload-photo
2 |
3 |
4 |
5 | # photograph
6 | vue 组件 h5调用摄像头拍照或从相册中选择图片
7 |
8 | ## 需要安装依赖
9 |
10 | ```
11 | npm install exif-js --save
12 | ```
13 |
14 | ## [demo](http://demo.leojuly.top/vue-demo/)
15 | ```
16 |
17 |
18 |
19 | ```
20 |
21 |
22 | ## Project setup
23 | ```
24 | yarn install
25 | ```
26 |
27 | ### Compiles and hot-reloads for development
28 | ```
29 | yarn run serve
30 | ```
31 |
32 | ### Compiles and minifies for production
33 | ```
34 | yarn run build
35 | ```
36 |
37 | ### Run your tests
38 | ```
39 | yarn run test
40 | ```
41 |
42 | ### Lints and fixes files
43 | ```
44 | yarn run lint
45 | ```
46 |
47 | ### Customize configuration
48 | See [Configuration Reference](https://cli.vuejs.org/config/).
49 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "upload-photo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^2.6.5",
12 | "exif-js": "^2.3.0",
13 | "vue": "^2.6.10"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.6.0",
17 | "@vue/cli-plugin-eslint": "^3.6.0",
18 | "@vue/cli-service": "^3.6.0",
19 | "babel-eslint": "^10.0.1",
20 | "eslint": "^5.16.0",
21 | "eslint-plugin-vue": "^5.0.0",
22 | "less": "^3.9.0",
23 | "less-loader": "^4.1.0",
24 | "vue-template-compiler": "^2.5.21"
25 | },
26 | "eslintConfig": {
27 | "root": true,
28 | "env": {
29 | "node": true
30 | },
31 | "extends": [
32 | "plugin:vue/essential",
33 | "eslint:recommended"
34 | ],
35 | "rules": {},
36 | "parserOptions": {
37 | "parser": "babel-eslint"
38 | }
39 | },
40 | "postcss": {
41 | "plugins": {
42 | "autoprefixer": {}
43 | }
44 | },
45 | "browserslist": [
46 | "> 1%",
47 | "last 2 versions",
48 | "not ie <= 8"
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/src/assets/style/common.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | font-family: 'Avenir', Helvetica, Arial, sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | background: rgba(255, 255, 255, 1);
8 | font-size: .24rem;
9 | line-height: 1;
10 | color: #333;
11 | }
12 |
13 | html,
14 | body,
15 | p,
16 | h2,
17 | h3,
18 | h4,
19 | ul,
20 | li,
21 | input {
22 | margin: 0px;
23 | padding: 0px;
24 | }
25 |
26 | ul,
27 | li {
28 | list-style: none;
29 | }
30 |
31 | a {
32 | text-decoration: none;
33 | }
34 |
35 | image {
36 | vertical-align: middle;
37 | }
38 |
39 | input {
40 | -webkit-tap-highlight-color: transparent;
41 | border: 0;
42 | outline: none;
43 | -webkit-appearance: none;
44 | }
45 | input:disabled{
46 | background: transparent;
47 | }
48 | input::-webkit-input-placeholder{
49 | color: #ccc;
50 | }
51 | .clearfix:after {
52 | content: ".";
53 | display: block;
54 | visibility: hidden;
55 | clear: both;
56 | height: 0;
57 | font-size: 0
58 | }
59 |
60 | #toast{
61 | position: fixed;
62 | left: 50%;
63 | top: 50%;
64 | padding: .2rem .4rem;
65 | max-width: 3rem;
66 | background: rgba(0, 0, 0, .6);
67 | z-index: 999;
68 | font-size: .34rem;
69 | color: #fff;
70 | border-radius: .08rem;
71 | box-sizing: border-box;
72 | transform: translate3d(-50%,-50%,0);
73 | -webkit-border-radius: .08rem;
74 | -webkit-box-sizing: border-box;
75 | -webkit-transform: translate3d(-50%,-50%,0);
76 | z-index: 999;
77 | }
78 | .container{
79 | min-height: 100%;
80 | box-sizing: border-box;
81 | }.container{
82 | min-height: 100%;
83 | box-sizing: border-box;
84 | }
85 |
86 | #loading{
87 | position: fixed;
88 | left: 0;
89 | top: 0;
90 | right: 0;
91 | bottom: 0;
92 | }
93 | .loading-inner{
94 | padding: .5rem;
95 | display: flex;
96 | align-items: center;
97 | justify-content: center;
98 | flex-direction: column;
99 | position: fixed;
100 | left: 50%;
101 | top: 50%;
102 | transform: translate3d(-50%,-50%,0);
103 | background: rgba(0, 0, 0, .6);
104 | border-radius: .1rem;
105 | }
106 | .loading-circle{
107 | width: 1rem;
108 | height: 1rem;
109 | border-radius: 50%;
110 | border-width: .04rem;
111 | border-style: solid;
112 | border-top-color: rgba(255, 255, 255, 1);
113 | border-right-color: rgba(255, 255, 255, 1);
114 | border-bottom-color: rgba(255, 255, 255, 0.1);
115 | border-left-color: rgba(255, 255, 255, 0.1);
116 | animation: loading 1s ease-in infinite;
117 | }
118 | @keyframes loading{
119 | from {
120 | transform: rotate(0deg)
121 | }
122 | to{
123 | transform: rotate(360deg)
124 | }
125 | }
--------------------------------------------------------------------------------
/src/components/photograph.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
197 |
198 |
226 |
227 |
--------------------------------------------------------------------------------