├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── dist ├── index.html └── static │ ├── css │ ├── app.70f2a87e75ff6845e8b97a16c1cd69cc.css │ └── app.70f2a87e75ff6845e8b97a16c1cd69cc.css.map │ ├── img │ ├── bg.84ce8d4.png │ ├── temp1.a71cdce.png │ ├── temp2.453791f.png │ └── temp3.fc6b51d.png │ └── js │ ├── app.6eb02b2260435bbd70ce.js │ ├── app.6eb02b2260435bbd70ce.js.map │ ├── manifest.3ad1d5771e9b13dbdad2.js │ ├── manifest.3ad1d5771e9b13dbdad2.js.map │ ├── vendor.dacb1598a4187399b00d.js │ └── vendor.dacb1598a4187399b00d.js.map ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── css │ │ ├── reset.css │ │ └── reset.less │ └── imgs │ │ ├── bg.jpg │ │ ├── bg.png │ │ ├── camera.png │ │ ├── temp1.png │ │ ├── temp2.png │ │ └── temp3.png ├── main.js ├── page │ ├── Index.vue │ └── Share.vue └── router │ └── index.js ├── static └── .gitkeep ├── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ │ └── test.js └── unit │ ├── .eslintrc │ ├── jest.conf.js │ ├── setup.js │ └── specs │ └── HelloWorld.spec.js └── utils ├── axios.js └── http.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime",["component",[ 12 | { 13 | "libraryName": "mint-ui", 14 | "style": true 15 | } 16 | ]]], 17 | "env": { 18 | "test": { 19 | "presets": ["env", "stage-2"], 20 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | /test/unit/coverage/ 7 | /test/e2e/reports/ 8 | selenium-debug.log 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # upload-avatar 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | 20 | # run unit tests 21 | npm run unit 22 | 23 | # run e2e tests 24 | npm run e2e 25 | 26 | # run all tests 27 | npm test 28 | ``` 29 | 30 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 31 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | // const createLintingRule = () => ({ 12 | // test: /\.(js|vue)$/, 13 | // loader: 'eslint-loader', 14 | // enforce: 'pre', 15 | // include: [resolve('src'), resolve('test')], 16 | // options: { 17 | // formatter: require('eslint-friendly-formatter'), 18 | // emitWarning: !config.dev.showEslintErrorsInOverlay 19 | // } 20 | // }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | // ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = process.env.NODE_ENV === 'testing' 15 | ? require('../config/test.env') 16 | : require('../config/prod.env') 17 | 18 | const webpackConfig = merge(baseWebpackConfig, { 19 | module: { 20 | rules: utils.styleLoaders({ 21 | sourceMap: config.build.productionSourceMap, 22 | extract: true, 23 | usePostCSS: true 24 | }) 25 | }, 26 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 30 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 31 | }, 32 | plugins: [ 33 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 34 | new webpack.DefinePlugin({ 35 | 'process.env': env 36 | }), 37 | new UglifyJsPlugin({ 38 | uglifyOptions: { 39 | compress: { 40 | warnings: false 41 | } 42 | }, 43 | sourceMap: config.build.productionSourceMap, 44 | parallel: true 45 | }), 46 | // extract css into its own file 47 | new ExtractTextPlugin({ 48 | filename: utils.assetsPath('css/[name].[contenthash].css'), 49 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 50 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 51 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 52 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 53 | allChunks: true, 54 | }), 55 | // Compress extracted CSS. We are using this plugin so that possible 56 | // duplicated CSS from different components can be deduped. 57 | new OptimizeCSSPlugin({ 58 | cssProcessorOptions: config.build.productionSourceMap 59 | ? { safe: true, map: { inline: false } } 60 | : { safe: true } 61 | }), 62 | // generate dist index.html with correct asset hash for caching. 63 | // you can customize output by editing /index.html 64 | // see https://github.com/ampedandwired/html-webpack-plugin 65 | new HtmlWebpackPlugin({ 66 | filename: process.env.NODE_ENV === 'testing' 67 | ? 'index.html' 68 | : config.build.index, 69 | template: 'index.html', 70 | inject: true, 71 | minify: { 72 | removeComments: true, 73 | collapseWhitespace: true, 74 | removeAttributeQuotes: true 75 | // more options: 76 | // https://github.com/kangax/html-minifier#options-quick-reference 77 | }, 78 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 79 | chunksSortMode: 'dependency' 80 | }), 81 | // keep module.id stable when vendor modules does not change 82 | new webpack.HashedModuleIdsPlugin(), 83 | // enable scope hoisting 84 | new webpack.optimize.ModuleConcatenationPlugin(), 85 | // split vendor js into its own file 86 | new webpack.optimize.CommonsChunkPlugin({ 87 | name: 'vendor', 88 | minChunks (module) { 89 | // any required modules inside node_modules are extracted to vendor 90 | return ( 91 | module.resource && 92 | /\.js$/.test(module.resource) && 93 | module.resource.indexOf( 94 | path.join(__dirname, '../node_modules') 95 | ) === 0 96 | ) 97 | } 98 | }), 99 | // extract webpack runtime and module manifest to its own file in order to 100 | // prevent vendor hash from being updated whenever app bundle is updated 101 | new webpack.optimize.CommonsChunkPlugin({ 102 | name: 'manifest', 103 | minChunks: Infinity 104 | }), 105 | // This instance extracts shared chunks from code splitted chunks and bundles them 106 | // in a separate chunk, similar to the vendor chunk 107 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 108 | new webpack.optimize.CommonsChunkPlugin({ 109 | name: 'app', 110 | async: 'vendor-async', 111 | children: true, 112 | minChunks: 3 113 | }), 114 | 115 | // copy custom static assets 116 | new CopyWebpackPlugin([ 117 | { 118 | from: path.resolve(__dirname, '../static'), 119 | to: config.build.assetsSubDirectory, 120 | ignore: ['.*'] 121 | } 122 | ]) 123 | ] 124 | }) 125 | 126 | if (config.build.productionGzip) { 127 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 128 | 129 | webpackConfig.plugins.push( 130 | new CompressionWebpackPlugin({ 131 | asset: '[path].gz[query]', 132 | algorithm: 'gzip', 133 | test: new RegExp( 134 | '\\.(' + 135 | config.build.productionGzipExtensions.join('|') + 136 | ')$' 137 | ), 138 | threshold: 10240, 139 | minRatio: 0.8 140 | }) 141 | ) 142 | } 143 | 144 | if (config.build.bundleAnalyzerReport) { 145 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 146 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 147 | } 148 | 149 | module.exports = webpackConfig 150 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | '/api': { 15 | target: 'http://127.0.0.1:3000/', //需要代理的地址 16 | changeOrigin: true, //是否跨域 17 | secure: false, 18 | pathRewrite: { 19 | '^/api': '/' 20 | } 21 | } 22 | }, 23 | 24 | // Various Dev Server settings 25 | host: '0.0.0.0', // can be overwritten by process.env.HOST 26 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 27 | autoOpenBrowser: false, 28 | errorOverlay: true, 29 | notifyOnErrors: true, 30 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 31 | 32 | // Use Eslint Loader? 33 | // If true, your code will be linted during bundling and 34 | // linting errors and warnings will be shown in the console. 35 | useEslint: true, 36 | // If true, eslint errors and warnings will also be shown in the error overlay 37 | // in the browser. 38 | showEslintErrorsInOverlay: false, 39 | 40 | /** 41 | * Source Maps 42 | */ 43 | 44 | // https://webpack.js.org/configuration/devtool/#development 45 | devtool: 'cheap-module-eval-source-map', 46 | 47 | // If you have problems debugging vue-files in devtools, 48 | // set this to false - it *may* help 49 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 50 | cacheBusting: true, 51 | 52 | cssSourceMap: true 53 | }, 54 | 55 | build: { 56 | // Template for index.html 57 | index: path.resolve(__dirname, '../dist/index.html'), 58 | 59 | // Paths 60 | assetsRoot: path.resolve(__dirname, '../dist'), 61 | assetsSubDirectory: 'static', 62 | assetsPublicPath: './', 63 | 64 | /** 65 | * Source Maps 66 | */ 67 | 68 | productionSourceMap: true, 69 | // https://webpack.js.org/configuration/devtool/#production 70 | devtool: '#source-map', 71 | 72 | // Gzip off by default as many popular static hosts such as 73 | // Surge or Netlify already gzip all static assets for you. 74 | // Before setting to `true`, make sure to: 75 | // npm install --save-dev compression-webpack-plugin 76 | productionGzip: false, 77 | productionGzipExtensions: ['js', 'css'], 78 | 79 | // Run the build command with an extra argument to 80 | // View the bundle analyzer report after build finishes: 81 | // `npm run build --report` 82 | // Set to `true` or `false` to always turn it on or off 83 | bundleAnalyzerReport: process.env.npm_config_report 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | upload-avatar
-------------------------------------------------------------------------------- /dist/static/css/app.70f2a87e75ff6845e8b97a16c1cd69cc.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}li,ul{list-style:none}a{text-decoration:none}#app .index-container{padding-top:.6rem;box-sizing:border-box;min-height:100vh;background:url(static/img/bg.84ce8d4.png) no-repeat}#app .index-container .upload-btn{display:block;font-size:.36rem;width:5.26rem;height:.92rem;background:#2f96ff;line-height:.92rem;color:#fff;margin:0 auto;text-align:center;border-radius:10px;font-weight:400;box-shadow:0 .1rem 0 .001rem #448adf;position:relative}#app .index-container .upload-btn:before{display:inline-block;content:"";width:.44rem;height:.36rem;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAxCAYAAACGYsqsAAAAAXNSR0IArs4c6QAABONJREFUaAXlml2IlUUYxz2Wmrpi+LVleiVaSCHiJ3ohpUEXmYZeiFsXubtXVpB6odBVsKgRXaQgyNaNKUgXRdbNni40IVoVvwqVQpQsPzORRCxdj7//uudwzjjzvu+ZmXc94gP/fc8888x/nv955513Zs4WBkS2Uqn0GpQvgkHgrgd9gTbCP+CrQqGga2MaYneAmHYZshkNqZbEOmMqreLq4fPChhKdo9gq3aVlDSG6n8SWhbeGitbkUDFYn6LQU3G4PyhmMNgC2txhudSsgXUr0IQ4MEMPA5n4/ivH9QpGaAeOpWAUkJgSSDLF6MtpTgrKse4vuJVDmmDpU8wFsA3hnQXErqewETwO9pYES/0zj4NaNO5/kj9pwyLmd3ERsjPgZh/pCK6TwOi+ct6XHgn+P8de9Jx9A74HB8BpnqNbXCvGCJPoKWA2eBO8CvKy2wPo8ByIbTcg/AhMrDdz2rwAtoA8rCsPwTvJdHy9Qs14OKaCYmTVXbGf3/cYsi3gvCmg3jIcJ4CG96Z62ybF6xmOZStIcHcssjIPnBu4y9coby77Qq6xBLemiSXpWSQ6H0wDTwOtlLT1Owz20/5Xrlaj7mPaq80Ga0A9TohCJy0t85wG/0pwHKTZPgISZ2jqQ5/p4ElL71SrkdwwsAfUa9uthDghagI36yWsig+etFbZkqODkfiPgddt9Sm+dtr/aIthaN/Ar6Wwv0HuO6SPunqF8ygIta8T+K96kgfd4c9sCZFIB35NTKG2FK6VDpIvHP5UtzYP54iakBpZG6Al41iG2LVqN1xaE/9d7Qv8fIX2zfRTs12ln5n4D3pwF30XHt2m2L7O2z2SSGoylsolZgB9H8J3yfRnKfsKVoc2e8PmDPQtd7TX+7tu8xV81uyJYTYc30umP0LZNR84X4lJffoKvmohfRZfk8Uf6hrHl6nzM9NsOZgxD5R9Bd9+gOn+oZ7FHewaBMMQC4stB0tYrctX8NBamt7SvxZfDJdOR8onJNV8w6oLWT/7CradgelszGvmTEn2T2ZlvQZN8zox9RU82eydpO7g83k3mlRm+SfT0Vd+3uFPdPsKnudg/dLhD3HvMBsziWk4Tzf9Wcq+gqfQqQ7eaoy7vBuHVkexTAucIxayV/DZ5hFLaK3LV7BY3q6lqpTaKp/CP7i43vGm5k757paca2Y4t4JQe98mCtIxAcRBu6XRdLzOlhTD8F38n9vqMvo+hMO6G6P9Jxk57GEk7XuH9UXfBc7XA3WrwXWQ1ZSLa+2sE4+5WYkcccFHPOJNXMRT3ww6wC/AZd1UrAfOiYi6IeAKCLEu3/2wOVx2MQRbTKdZJtOp+PRb0nNAp5Z/gN9pe5protH2ZwLmJAalVxZj/vLQmd6fXwRifwi5rVVtgyYtM/tWiL8FI80K3zJck4BWbwt9Ocx2Ie9hk0vlxeAkSbrOomxtrD44PqDiBNBxTjSLLViJaV+sH9QOglUg866GWO1914JTcHwKbPtg3P4Wa9JKykBLzb3gENCMfh5oK6n/v9Dwnwi0Lp4LXgbDQV5W7A/BtuS1s5LgJ2yVOfqK+jFNHfe3qd+HYQU9w86X/cPIKOc+R0iw12FYzonlRX9Az/AC2L8DTXn10iC83eSxqPf51euAwhIwBuhnjZqfNig/qqZJUf92+BvL1z0ScQ90SuUzYupxjgAAAABJRU5ErkJggg==) no-repeat;background-size:100%;margin-right:.1rem;vertical-align:middle}#app .index-container .upload-btn #image-input{position:absolute;z-index:-1;width:100%;height:100%;left:0;top:0;outline:none;border-radius:10px}#app .index-container .photo-box{margin:.4rem auto .2rem;width:6.4rem;height:6rem;background:#fff;position:relative;overflow:hidden}#app .index-container .photo-box img{width:6.4rem;height:6rem;position:absolute;z-index:99}#app .index-container .photo-box .preview-box{position:absolute;z-index:9;left:0;top:0;width:100%;height:100%}#app .index-container .photo-ul{width:100%;height:2.1rem;padding:.14rem 0;box-sizing:border-box;background:#fff;text-align:center}#app .index-container .photo-ul img{width:1.6rem;height:1.72rem;border-radius:5px}#app .index-container .photo-ul .select-img{border:2px solid #ff5b2f;box-shadow:0 4px 10px 0 rgba(250,82,82,.7)}#app .index-container .composite-btn{display:block;font-size:.36rem;width:5.26rem;height:.92rem;background:rgba(243,111,84,.881);line-height:.92rem;color:#fff;margin:.2rem auto;text-align:center;border-radius:10px;font-weight:400;box-shadow:0 .1rem 0 .001rem #e0836a}.share-box{text-align:center}.share-box img{width:6.4rem;margin:0 auto} 2 | /*# sourceMappingURL=app.70f2a87e75ff6845e8b97a16c1cd69cc.css.map */ -------------------------------------------------------------------------------- /dist/static/css/app.70f2a87e75ff6845e8b97a16c1cd69cc.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["app.70f2a87e75ff6845e8b97a16c1cd69cc.css"],"names":[],"mappings":"AAeA,EACE,SAAU,AACV,SAAW,CACZ,AACD,MAEE,eAAiB,CAClB,AACD,EACE,oBAAsB,CACvB,AACD,sBACE,kBAAoB,AAEZ,sBAAuB,AAC/B,iBAAkB,AAClB,mDAAuD,CACxD,AACD,kCACE,cAAe,AACf,iBAAmB,AACnB,cAAe,AACf,cAAgB,AAChB,mBAAoB,AACpB,mBAAqB,AACrB,WAAY,AACZ,cAAe,AACf,kBAAmB,AACnB,mBAAoB,AACpB,gBAAoB,AAEZ,qCAA2C,AACnD,iBAAmB,CACpB,AACD,yCACE,qBAAsB,AACtB,WAAY,AACZ,aAAe,AACf,cAAgB,AAChB,qxDAAsxD,AACtxD,qBAAsB,AACtB,mBAAqB,AACrB,qBAAuB,CACxB,AACD,+CACE,kBAAmB,AACnB,WAAY,AACZ,WAAY,AACZ,YAAa,AACb,OAAQ,AACR,MAAO,AACP,aAAc,AACd,kBAAoB,CACrB,AACD,iCACE,wBAAgC,AAChC,aAAc,AACd,YAAa,AACb,gBAAiB,AACjB,kBAAmB,AACnB,eAAiB,CAClB,AACD,qCACE,aAAc,AACd,YAAa,AACb,kBAAmB,AACnB,UAAY,CACb,AACD,8CACE,kBAAmB,AACnB,UAAW,AACX,OAAQ,AACR,MAAO,AACP,WAAY,AACZ,WAAa,CACd,AACD,gCACE,WAAY,AACZ,cAAe,AACf,iBAAmB,AAEX,sBAAuB,AAC/B,gBAAiB,AACjB,iBAAmB,CACpB,AACD,oCACE,aAAc,AACd,eAAgB,AAChB,iBAAmB,CACpB,AACD,4CACE,yBAA0B,AAElB,0CAAkD,CAC3D,AACD,qCACE,cAAe,AACf,iBAAmB,AACnB,cAAe,AACf,cAAgB,AAChB,iCAAsC,AACtC,mBAAqB,AACrB,WAAY,AACZ,kBAAoB,AACpB,kBAAmB,AACnB,mBAAoB,AACpB,gBAAoB,AAEZ,oCAA2C,CACpD,AAED,WACE,iBAAmB,CACpB,AACD,eACE,aAAc,AACd,aAAe,CAChB","file":"app.70f2a87e75ff6845e8b97a16c1cd69cc.css","sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n* {\n margin: 0;\n padding: 0;\n}\nul,\nli {\n list-style: none;\n}\na {\n text-decoration: none;\n}\n#app .index-container {\n padding-top: 0.6rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n min-height: 100vh;\n background: url(./static/img/bg.84ce8d4.png) no-repeat;\n}\n#app .index-container .upload-btn {\n display: block;\n font-size: 0.36rem;\n width: 5.26rem;\n height: 0.92rem;\n background: #2f96ff;\n line-height: 0.92rem;\n color: #fff;\n margin: 0 auto;\n text-align: center;\n border-radius: 10px;\n font-weight: normal;\n -webkit-box-shadow: 0rem 0.1rem 0 0.001rem #448adf;\n box-shadow: 0rem 0.1rem 0 0.001rem #448adf;\n position: relative;\n}\n#app .index-container .upload-btn::before {\n display: inline-block;\n content: '';\n width: 0.44rem;\n height: 0.36rem;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAxCAYAAACGYsqsAAAAAXNSR0IArs4c6QAABONJREFUaAXlml2IlUUYxz2Wmrpi+LVleiVaSCHiJ3ohpUEXmYZeiFsXubtXVpB6odBVsKgRXaQgyNaNKUgXRdbNni40IVoVvwqVQpQsPzORRCxdj7//uudwzjjzvu+ZmXc94gP/fc8888x/nv955513Zs4WBkS2Uqn0GpQvgkHgrgd9gTbCP+CrQqGga2MaYneAmHYZshkNqZbEOmMqreLq4fPChhKdo9gq3aVlDSG6n8SWhbeGitbkUDFYn6LQU3G4PyhmMNgC2txhudSsgXUr0IQ4MEMPA5n4/ivH9QpGaAeOpWAUkJgSSDLF6MtpTgrKse4vuJVDmmDpU8wFsA3hnQXErqewETwO9pYES/0zj4NaNO5/kj9pwyLmd3ERsjPgZh/pCK6TwOi+ct6XHgn+P8de9Jx9A74HB8BpnqNbXCvGCJPoKWA2eBO8CvKy2wPo8ByIbTcg/AhMrDdz2rwAtoA8rCsPwTvJdHy9Qs14OKaCYmTVXbGf3/cYsi3gvCmg3jIcJ4CG96Z62ybF6xmOZStIcHcssjIPnBu4y9coby77Qq6xBLemiSXpWSQ6H0wDTwOtlLT1Owz20/5Xrlaj7mPaq80Ga0A9TohCJy0t85wG/0pwHKTZPgISZ2jqQ5/p4ElL71SrkdwwsAfUa9uthDghagI36yWsig+etFbZkqODkfiPgddt9Sm+dtr/aIthaN/Ar6Wwv0HuO6SPunqF8ygIta8T+K96kgfd4c9sCZFIB35NTKG2FK6VDpIvHP5UtzYP54iakBpZG6Al41iG2LVqN1xaE/9d7Qv8fIX2zfRTs12ln5n4D3pwF30XHt2m2L7O2z2SSGoylsolZgB9H8J3yfRnKfsKVoc2e8PmDPQtd7TX+7tu8xV81uyJYTYc30umP0LZNR84X4lJffoKvmohfRZfk8Uf6hrHl6nzM9NsOZgxD5R9Bd9+gOn+oZ7FHewaBMMQC4stB0tYrctX8NBamt7SvxZfDJdOR8onJNV8w6oLWT/7CradgelszGvmTEn2T2ZlvQZN8zox9RU82eydpO7g83k3mlRm+SfT0Vd+3uFPdPsKnudg/dLhD3HvMBsziWk4Tzf9Wcq+gqfQqQ7eaoy7vBuHVkexTAucIxayV/DZ5hFLaK3LV7BY3q6lqpTaKp/CP7i43vGm5k757paca2Y4t4JQe98mCtIxAcRBu6XRdLzOlhTD8F38n9vqMvo+hMO6G6P9Jxk57GEk7XuH9UXfBc7XA3WrwXWQ1ZSLa+2sE4+5WYkcccFHPOJNXMRT3ww6wC/AZd1UrAfOiYi6IeAKCLEu3/2wOVx2MQRbTKdZJtOp+PRb0nNAp5Z/gN9pe5protH2ZwLmJAalVxZj/vLQmd6fXwRifwi5rVVtgyYtM/tWiL8FI80K3zJck4BWbwt9Ocx2Ie9hk0vlxeAkSbrOomxtrD44PqDiBNBxTjSLLViJaV+sH9QOglUg866GWO1914JTcHwKbPtg3P4Wa9JKykBLzb3gENCMfh5oK6n/v9Dwnwi0Lp4LXgbDQV5W7A/BtuS1s5LgJ2yVOfqK+jFNHfe3qd+HYQU9w86X/cPIKOc+R0iw12FYzonlRX9Az/AC2L8DTXn10iC83eSxqPf51euAwhIwBuhnjZqfNig/qqZJUf92+BvL1z0ScQ90SuUzYupxjgAAAABJRU5ErkJggg==) no-repeat;\n background-size: 100%;\n margin-right: 0.1rem;\n vertical-align: middle;\n}\n#app .index-container .upload-btn #image-input {\n position: absolute;\n z-index: -1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n outline: none;\n border-radius: 10px;\n}\n#app .index-container .photo-box {\n margin: 0.4rem auto 0.2rem auto;\n width: 6.4rem;\n height: 6rem;\n background: #fff;\n position: relative;\n overflow: hidden;\n}\n#app .index-container .photo-box img {\n width: 6.4rem;\n height: 6rem;\n position: absolute;\n z-index: 99;\n}\n#app .index-container .photo-box .preview-box {\n position: absolute;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n#app .index-container .photo-ul {\n width: 100%;\n height: 2.1rem;\n padding: 0.14rem 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: #fff;\n text-align: center;\n}\n#app .index-container .photo-ul img {\n width: 1.6rem;\n height: 1.72rem;\n border-radius: 5px;\n}\n#app .index-container .photo-ul .select-img {\n border: 2px solid #ff5b2f;\n -webkit-box-shadow: 0px 4px 10px 0 rgba(250, 82, 82, 0.7);\n box-shadow: 0px 4px 10px 0 rgba(250, 82, 82, 0.7);\n}\n#app .index-container .composite-btn {\n display: block;\n font-size: 0.36rem;\n width: 5.26rem;\n height: 0.92rem;\n background: rgba(243, 111, 84, 0.881);\n line-height: 0.92rem;\n color: #fff;\n margin: 0.2rem auto;\n text-align: center;\n border-radius: 10px;\n font-weight: normal;\n -webkit-box-shadow: 0rem 0.1rem 0 0.001rem #e0836a;\n box-shadow: 0rem 0.1rem 0 0.001rem #e0836a;\n}\n\n.share-box {\n text-align: center;\n}\n.share-box img {\n width: 6.4rem;\n margin: 0 auto;\n}\n"]} -------------------------------------------------------------------------------- /dist/static/img/bg.84ce8d4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/dist/static/img/bg.84ce8d4.png -------------------------------------------------------------------------------- /dist/static/img/temp1.a71cdce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/dist/static/img/temp1.a71cdce.png -------------------------------------------------------------------------------- /dist/static/img/temp2.453791f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/dist/static/img/temp2.453791f.png -------------------------------------------------------------------------------- /dist/static/img/temp3.fc6b51d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/dist/static/img/temp3.fc6b51d.png -------------------------------------------------------------------------------- /dist/static/js/app.6eb02b2260435bbd70ce.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"/X17":function(t,e,i){t.exports=i.p+"static/img/temp3.fc6b51d.png"},NHnr:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i("7+uW"),a={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("router-view")],1)},staticRenderFns:[]};var s=i("VU/8")({name:"App"},a,!1,function(t){i("ymcE")},null,null).exports,c=i("/ocq"),o=i("2Pnh"),h=i.n(o),r=i("sbrb"),g=i.n(r),u={data:function(){return{curIndex:0,imgArr:[i("neOf"),i("Xhsr"),i("/X17")],imgUrl:"",initTouchX:0,initTouchY:0,changeTouchX:0,changeTouchY:0,reviewImgDom:"",lastTouchX:0,lastTouchY:0,previewImg:"",myImg:{position:{x:0,y:0},scale:1,lastScale:1}}},mounted:function(){this.previewImg=document.querySelector("#preview-img"),document.addEventListener("touchstart",function(t){t.touches.length>1&&t.preventDefault()});var t=0;document.addEventListener("touchend",function(e){var i=(new Date).getTime();i-t<=300&&e.preventDefault(),t=i},!1)},methods:{getPhoto:function(){var t=this;document.querySelector("#image-input").addEventListener("change",function(e){var i=new FileReader;i.readAsDataURL(this.files[0]),i.addEventListener("load",function(e){var i;t.imgUrl=this.result,t.myImg.position.x=0,t.myImg.position.y=0,t.myImg.scale=1,t.previewImg.addEventListener("load",function(){g.a.getData(t.previewImg,function(){g.a.getAllTags(this),i=g.a.getTag(this,"Orientation");var e=document.createElement("canvas"),n=e.getContext("2d");switch(i){case 1:e.width=t.previewImg.width,e.height=t.previewImg.height,n.drawImage(t.previewImg,0,0,t.previewImg.width,t.previewImg.height);break;case 6:e.width=t.previewImg.height,e.height=t.previewImg.width,n.translate(0,0),n.rotate(90*Math.PI/180),n.drawImage(t.previewImg,0,-t.previewImg.height,t.previewImg.width,t.previewImg.height);break;case 8:e.width=t.previewImg.height,e.height=t.previewImg.width,n.translate(0,0),n.rotate(-90*Math.PI/180),n.drawImage(t.previewImg,-t.previewImg.width,0,t.previewImg.width,t.previewImg.height);break;case 3:e.width=t.previewImg.width,e.height=t.previewImg.height,n.translate(0,0),n.rotate(Math.PI),n.drawImage(t.previewImg,-t.previewImg.width,-t.previewImg.height,t.previewImg.width,t.previewImg.height);break;default:e.width=t.previewImg.width,e.height=t.previewImg.height,n.drawImage(t.previewImg,0,0,t.previewImg.width,t.previewImg.height)}e.toDataURL("image/jpeg",.5)})})})})},changeIndex:function(t){this.curIndex=t},getInitPosition:function(t){if(event.preventDefault(),this.imgUrl)if(t.touches.length>1){var e=t.touches[0],i=t.touches[1];this.initTouchX=e.clientX-i.clientX,this.initTouchY=e.clientY-i.clientY}else{var n=t.touches[0];this.initTouchX=n.clientX,this.initTouchY=n.clientY}},getMovePosition:function(t){if(event.preventDefault(),this.imgUrl)if(t.touches.length>1){var e=t.touches[0],i=t.touches[1];this.changeTouchX=e.clientX-i.clientX,this.changeTouchY=e.clientY-i.clientY;var n=this.changeTouchX-this.initTouchX>this.changeTouchY-this.initTouchY?this.changeTouchX/this.initTouchX:this.changeTouchY/this.initTouchY;n*=this.myImg.lastScale,this.myImg.scale=n>3?3:n<.5?.5:n}else{var a=t.touches[0];this.changeTouchX=a.clientX-this.initTouchX,this.changeTouchY=a.clientY-this.initTouchY,this.myImg.position.x=this.lastTouchX+this.changeTouchX/this.myImg.scale,this.myImg.position.y=this.lastTouchY+this.changeTouchY/this.myImg.scale}},getLeavePosition:function(t){if(this.myImg.lastScale=this.myImg.scale,t.touches.length>0){var e=t.touches[0];this.initTouchX=e.clientX,this.initTouchY=e.clientY}this.lastTouchX=this.myImg.position.x,this.lastTouchY=this.myImg.position.y},createPhoto:function(){if(this.imgUrl){var t=document.querySelector(".photo-box"),e=t.style.offsetWidth,i=t.style.offsetHeight,n=window.devicePixelRatio,a=this;h()(t,{width:e,height:i,scale:n,useCORS:!0}).then(function(t){var e=t.toDataURL("image/jpg");localStorage.imgData=e,a.$router.push({name:"share",params:{storage:"imgData"}})})}else alert("请上传图片")}}},m={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"index-container"},[n("label",{staticClass:"upload-btn"},[t._v("开始上传或拍照\n "),n("input",{attrs:{type:"file",value:"",accept:"image/*",id:"image-input"},on:{click:t.getPhoto}})]),t._v(" "),n("div",{staticClass:"photo-box"},[n("div",{staticClass:"preview-box"},[n("img",{style:{transform:"scale("+t.myImg.scale+") translate("+t.myImg.position.x+"px,"+t.myImg.position.y+"px)"},attrs:{src:t.imgUrl,id:"preview-img"},on:{touchstart:function(e){t.getPosition(e)},touchmove:function(e){t.getMovePosition(e)},touchend:function(e){t.getLeavePosition(e)}}})]),t._v(" "),n("img",{attrs:{src:t.imgArr[t.curIndex],id:"preview-bg"},on:{touchstart:function(e){t.getInitPosition(e)},touchmove:function(e){t.getMovePosition(e)},touchend:function(e){t.getLeavePosition(e)}}})]),t._v(" "),n("div",{staticClass:"photo-ul"},[n("img",{class:{"select-img":0==t.curIndex},attrs:{src:i("neOf")},on:{click:function(e){t.changeIndex(0)}}}),t._v(" "),n("img",{class:{"select-img":1==t.curIndex},attrs:{src:i("Xhsr")},on:{click:function(e){t.changeIndex(1)}}}),t._v(" "),n("img",{class:{"select-img":2==t.curIndex},attrs:{src:i("/X17")},on:{click:function(e){t.changeIndex(2)}}})]),t._v(" "),n("div",{staticClass:"composite-btn",on:{click:t.createPhoto}},[t._v("合成图片")])])},staticRenderFns:[]};var l=i("VU/8")(u,m,!1,function(t){i("TOUM")},null,null).exports,p={data:function(){return{shareImgUrl:""}},created:function(){this.shareImgUrl=localStorage[this.$route.params.storage]}},v={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"share-box"},[e("img",{attrs:{src:this.shareImgUrl,alt:""}}),this._v(" "),e("span",[this._v("长按图片保存")])])},staticRenderFns:[]};var d=i("VU/8")(p,v,!1,function(t){i("gDt+")},null,null).exports;n.a.use(c.a);var I=new c.a({routes:[{path:"/",name:"IndexPage",component:l},{path:"share",name:"share",component:d}]});n.a.config.productionTip=!1,new n.a({el:"#app",router:I,components:{App:s},template:""})},TOUM:function(t,e){},Xhsr:function(t,e,i){t.exports=i.p+"static/img/temp2.453791f.png"},"gDt+":function(t,e){},neOf:function(t,e,i){t.exports=i.p+"static/img/temp1.a71cdce.png"},ymcE:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.6eb02b2260435bbd70ce.js.map -------------------------------------------------------------------------------- /dist/static/js/app.6eb02b2260435bbd70ce.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/assets/imgs/temp3.png","webpack:///./src/App.vue?b898","webpack:///./src/App.vue","webpack:///src/App.vue","webpack:///src/page/Index.vue","webpack:///./src/page/Index.vue?f850","webpack:///./src/page/Index.vue","webpack:///src/page/Share.vue","webpack:///./src/page/Share.vue?d183","webpack:///./src/page/Share.vue","webpack:///./src/router/index.js","webpack:///./src/main.js","webpack:///./src/assets/imgs/temp2.png","webpack:///./src/assets/imgs/temp1.png"],"names":["module","exports","__webpack_require__","p","selectortype_template_index_0_src_App","render","_h","this","$createElement","_c","_self","attrs","id","staticRenderFns","src_App","normalizeComponent","name","ssrContext","Index","data","curIndex","imgArr","imgUrl","initTouchX","initTouchY","changeTouchX","changeTouchY","reviewImgDom","lastTouchX","lastTouchY","previewImg","myImg","position","x","y","scale","lastScale","mounted","document","querySelector","addEventListener","event","touches","length","preventDefault","lastTouchEnd","now","Date","getTime","methods","getPhoto","that","e","reads","FileReader","readAsDataURL","files","orientation","result","exif_default","a","getData","getAllTags","getTag","rotateCanvas","createElement","rotateCtx","getContext","width","height","drawImage","translate","rotate","Math","PI","toDataURL","changeIndex","index","getInitPosition","pointOne","pointTwo","clientX","clientY","getMovePosition","getLeavePosition","createPhoto","photoBox","newImgWidth","style","offsetWidth","newImgHeight","offsetHeight","window","devicePixelRatio","npm_default","useCORS","then","canvas","dataUrl","localStorage","imgData","$router","push","params","storage","alert","page_Index","_vm","staticClass","_v","type","value","accept","on","click","transform","src","touchstart","$event","getPosition","touchmove","touchend","class","select-img","src_page_Index","Index_normalizeComponent","Share","shareImgUrl","created","$route","page_Share","alt","src_page_Share","Share_normalizeComponent","vue_esm","use","vue_router_esm","router","routes","path","component","config","productionTip","el","components","App","template"],"mappings":"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","file":"static/js/app.6eb02b2260435bbd70ce.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/img/temp3.fc6b51d.png\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/assets/imgs/temp3.png\n// module id = /X17\n// module chunks = 1","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('router-view')],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-9b74431c\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-9b74431c\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-9b74431c\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","\n \n \n\n\n// WEBPACK FOOTER //\n// src/page/Index.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"index-container\"},[_c('label',{staticClass:\"upload-btn\"},[_vm._v(\"开始上传或拍照\\n \"),_c('input',{attrs:{\"type\":\"file\",\"value\":\"\",\"accept\":\"image/*\",\"id\":\"image-input\"},on:{\"click\":_vm.getPhoto}})]),_vm._v(\" \"),_c('div',{staticClass:\"photo-box\"},[_c('div',{staticClass:\"preview-box\"},[_c('img',{style:({transform:'scale('+ _vm.myImg.scale+ ') translate('+_vm.myImg.position.x+'px,'+_vm.myImg.position.y+'px)'}),attrs:{\"src\":_vm.imgUrl,\"id\":\"preview-img\"},on:{\"touchstart\":function($event){_vm.getPosition($event)},\"touchmove\":function($event){_vm.getMovePosition($event)},\"touchend\":function($event){_vm.getLeavePosition($event)}}})]),_vm._v(\" \"),_c('img',{attrs:{\"src\":_vm.imgArr[_vm.curIndex],\"id\":\"preview-bg\"},on:{\"touchstart\":function($event){_vm.getInitPosition($event)},\"touchmove\":function($event){_vm.getMovePosition($event)},\"touchend\":function($event){_vm.getLeavePosition($event)}}})]),_vm._v(\" \"),_c('div',{staticClass:\"photo-ul\"},[_c('img',{class:{'select-img':_vm.curIndex==0},attrs:{\"src\":require(\"../assets/imgs/temp1.png\")},on:{\"click\":function($event){_vm.changeIndex(0)}}}),_vm._v(\" \"),_c('img',{class:{'select-img':_vm.curIndex==1},attrs:{\"src\":require(\"../assets/imgs/temp2.png\")},on:{\"click\":function($event){_vm.changeIndex(1)}}}),_vm._v(\" \"),_c('img',{class:{'select-img':_vm.curIndex==2},attrs:{\"src\":require(\"../assets/imgs/temp3.png\")},on:{\"click\":function($event){_vm.changeIndex(2)}}})]),_vm._v(\" \"),_c('div',{staticClass:\"composite-btn\",on:{\"click\":_vm.createPhoto}},[_vm._v(\"合成图片\")])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-c71c54f8\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/page/Index.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-c71c54f8\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Index.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Index.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-c71c54f8\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./Index.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/page/Index.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n// WEBPACK FOOTER //\n// src/page/Share.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"share-box\"},[_c('img',{attrs:{\"src\":_vm.shareImgUrl,\"alt\":\"\"}}),_vm._v(\" \"),_c('span',[_vm._v(\"长按图片保存\")])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-29a45492\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/page/Share.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-29a45492\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Share.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Share.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Share.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-29a45492\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./Share.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/page/Share.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\nimport Router from 'vue-router'\nimport IndexPage from '../page/Index.vue'\nimport Share from '../page/Share.vue'\nVue.use(Router)\n\nexport default new Router({\n routes: [\n {\n path: '/',\n name: 'IndexPage',\n component: IndexPage\n },\n {\n path: 'share',\n name: 'share',\n component: Share\n }\n ]\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/router/index.js","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport router from './router'\nVue.config.productionTip = false\n// require('./mock.js')\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n router,\n components: { App },\n template: ''\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","module.exports = __webpack_public_path__ + \"static/img/temp2.453791f.png\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/assets/imgs/temp2.png\n// module id = Xhsr\n// module chunks = 1","module.exports = __webpack_public_path__ + \"static/img/temp1.a71cdce.png\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/assets/imgs/temp1.png\n// module id = neOf\n// module chunks = 1"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/manifest.3ad1d5771e9b13dbdad2.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a 2 | 3 | 4 | 5 | 6 | upload-avatar 7 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "upload-avatar", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "munan2 <18845724607@163.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "unit": "jest --config test/unit/jest.conf.js --coverage", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run unit && npm run e2e", 13 | "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", 14 | "build": "node build/build.js" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.18.0", 18 | "babel-polyfill": "^6.26.0", 19 | "mint-ui": "^2.2.13", 20 | "qs": "^6.5.2", 21 | "vue": "^2.5.2", 22 | "vue-router": "^3.0.1" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^7.1.2", 26 | "babel-core": "^6.22.1", 27 | "babel-eslint": "^8.2.1", 28 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 29 | "babel-jest": "^21.0.2", 30 | "babel-loader": "^7.1.1", 31 | "babel-plugin-component": "^1.1.1", 32 | "babel-plugin-dynamic-import-node": "^1.2.0", 33 | "babel-plugin-syntax-jsx": "^6.18.0", 34 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 35 | "babel-plugin-transform-runtime": "^6.22.0", 36 | "babel-plugin-transform-vue-jsx": "^3.5.0", 37 | "babel-preset-env": "^1.3.2", 38 | "babel-preset-stage-2": "^6.22.0", 39 | "babel-register": "^6.22.0", 40 | "body-parser": "^1.18.3", 41 | "chalk": "^2.0.1", 42 | "chromedriver": "^2.27.2", 43 | "copy-webpack-plugin": "^4.0.1", 44 | "cross-spawn": "^5.0.1", 45 | "css-loader": "^0.28.0", 46 | "eslint": "^4.15.0", 47 | "eslint-config-standard": "^10.2.1", 48 | "eslint-friendly-formatter": "^3.0.0", 49 | "eslint-loader": "^1.7.1", 50 | "eslint-plugin-import": "^2.7.0", 51 | "eslint-plugin-node": "^5.2.0", 52 | "eslint-plugin-promise": "^3.4.0", 53 | "eslint-plugin-standard": "^3.0.1", 54 | "eslint-plugin-vue": "^4.0.0", 55 | "exif-js": "^2.3.0", 56 | "express": "^4.16.3", 57 | "express-session": "^1.15.6", 58 | "extract-text-webpack-plugin": "^3.0.0", 59 | "file-loader": "^1.1.4", 60 | "friendly-errors-webpack-plugin": "^1.6.1", 61 | "fs": "0.0.1-security", 62 | "html-webpack-plugin": "^2.30.1", 63 | "html2canvas": "^1.0.0-alpha.12", 64 | "jest": "^22.0.4", 65 | "jest-serializer-vue": "^0.3.0", 66 | "less": "^3.8.1", 67 | "less-loader": "^4.1.0", 68 | "mock": "^0.1.1", 69 | "mockjs": "^1.0.1-beta3", 70 | "mongoose": "^5.2.7", 71 | "nightwatch": "^0.9.12", 72 | "node-notifier": "^5.1.2", 73 | "optimize-css-assets-webpack-plugin": "^3.2.0", 74 | "ora": "^1.2.0", 75 | "path": "^0.12.7", 76 | "portfinder": "^1.0.13", 77 | "postcss-import": "^11.0.0", 78 | "postcss-loader": "^2.0.8", 79 | "postcss-url": "^7.2.1", 80 | "rimraf": "^2.6.0", 81 | "selenium-server": "^3.0.1", 82 | "semver": "^5.3.0", 83 | "session": "^0.1.0", 84 | "shelljs": "^0.7.6", 85 | "style-loader": "^0.22.1", 86 | "uglifyjs-webpack-plugin": "^1.1.1", 87 | "url-loader": "^0.5.8", 88 | "vue-jest": "^1.0.2", 89 | "vue-loader": "^13.3.0", 90 | "vue-style-loader": "^3.0.1", 91 | "vue-template-compiler": "^2.5.2", 92 | "webpack": "^3.6.0", 93 | "webpack-bundle-analyzer": "^2.9.0", 94 | "webpack-dev-server": "^2.9.1", 95 | "webpack-merge": "^4.1.0" 96 | }, 97 | "engines": { 98 | "node": ">= 6.0.0", 99 | "npm": ">= 3.0.0" 100 | }, 101 | "browserslist": [ 102 | "> 1%", 103 | "last 2 versions", 104 | "not ie <= 8" 105 | ] 106 | } 107 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | ul, 6 | li { 7 | list-style: none; 8 | } 9 | a { 10 | text-decoration: none; 11 | } 12 | -------------------------------------------------------------------------------- /src/assets/css/reset.less: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | ul, li { 6 | list-style: none; 7 | } 8 | a { 9 | text-decoration: none; 10 | } -------------------------------------------------------------------------------- /src/assets/imgs/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/bg.jpg -------------------------------------------------------------------------------- /src/assets/imgs/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/bg.png -------------------------------------------------------------------------------- /src/assets/imgs/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/camera.png -------------------------------------------------------------------------------- /src/assets/imgs/temp1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/temp1.png -------------------------------------------------------------------------------- /src/assets/imgs/temp2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/temp2.png -------------------------------------------------------------------------------- /src/assets/imgs/temp3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/src/assets/imgs/temp3.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | Vue.config.productionTip = false 7 | // require('./mock.js') 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | router, 12 | components: { App }, 13 | template: '' 14 | }) 15 | -------------------------------------------------------------------------------- /src/page/Index.vue: -------------------------------------------------------------------------------- 1 | 20 | 206 | -------------------------------------------------------------------------------- /src/page/Share.vue: -------------------------------------------------------------------------------- 1 | 7 | 19 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import IndexPage from '../page/Index.vue' 4 | import Share from '../page/Share.vue' 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'IndexPage', 12 | component: IndexPage 13 | }, 14 | { 15 | path: 'share', 16 | name: 'share', 17 | component: Share 18 | } 19 | ] 20 | }) 21 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/munan2/upload-avatar/3e951fa3ac62af5a2edb6f7bb883a32c10d9a8d2/static/.gitkeep -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // The assertion name is the filename. 3 | // Example usage: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // For more information on custom assertions see: 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | 10 | exports.assertion = function (selector, count) { 11 | this.message = 'Testing if element <' + selector + '> has count: ' + count 12 | this.expected = count 13 | this.pass = function (val) { 14 | return val === this.expected 15 | } 16 | this.value = function (res) { 17 | return res.value 18 | } 19 | this.command = function (cb) { 20 | var self = this 21 | return this.api.execute(function (selector) { 22 | return document.querySelectorAll(selector).length 23 | }, [selector], function (res) { 24 | cb.call(self, res) 25 | }) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | 4 | const webpack = require('webpack') 5 | const DevServer = require('webpack-dev-server') 6 | 7 | const webpackConfig = require('../../build/webpack.prod.conf') 8 | const devConfigPromise = require('../../build/webpack.dev.conf') 9 | 10 | let server 11 | 12 | devConfigPromise.then(devConfig => { 13 | const devServerOptions = devConfig.devServer 14 | const compiler = webpack(webpackConfig) 15 | server = new DevServer(compiler, devServerOptions) 16 | const port = devServerOptions.port 17 | const host = devServerOptions.host 18 | return server.listen(port, host) 19 | }) 20 | .then(() => { 21 | // 2. run the nightwatch test suite against it 22 | // to run in additional browsers: 23 | // 1. add an entry in test/e2e/nightwatch.conf.js under "test_settings" 24 | // 2. add it to the --env flag below 25 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 26 | // For more information on Nightwatch's config file, see 27 | // http://nightwatchjs.org/guide#settings-file 28 | let opts = process.argv.slice(2) 29 | if (opts.indexOf('--config') === -1) { 30 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 31 | } 32 | if (opts.indexOf('--env') === -1) { 33 | opts = opts.concat(['--env', 'chrome']) 34 | } 35 | 36 | const spawn = require('cross-spawn') 37 | const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 38 | 39 | runner.on('exit', function (code) { 40 | server.close() 41 | process.exit(code) 42 | }) 43 | 44 | runner.on('error', function (err) { 45 | server.close() 46 | throw err 47 | }) 48 | }) 49 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | transform: { 14 | '^.+\\.js$': '/node_modules/babel-jest', 15 | '.*\\.(vue)$': '/node_modules/vue-jest' 16 | }, 17 | testPathIgnorePatterns: [ 18 | '/test/e2e' 19 | ], 20 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 21 | setupFiles: ['/test/unit/setup'], 22 | mapCoverage: true, 23 | coverageDirectory: '/test/unit/coverage', 24 | collectCoverageFrom: [ 25 | 'src/**/*.{js,vue}', 26 | '!src/main.js', 27 | '!src/router/index.js', 28 | '!**/node_modules/**' 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | -------------------------------------------------------------------------------- /test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .toEqual('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /utils/axios.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import axios from 'axios' 4 | import {Indicator} from 'mint-ui' 5 | Vue.component(Indicator) 6 | let CancelToken = axios.CancelToken //取消请求 7 | let cancelFlag = true 8 | //设置默认请求头 9 | axios.defaults.headers = { 10 | 'X-Requested-With': 'XMLHttpRequest' 11 | } 12 | axios.defaults.timeout = 20000 13 | axios.interceptors.request.use(config => { 14 | let requestName = config.data.requestName 15 | if (requestName) { 16 | if (axios[requestName] && axios[requestName].cancel) { 17 | axios[requestName].cancel() 18 | } 19 | config.cancelToken = new CancelToken (c => { 20 | axios[requestName] = {} 21 | axios[requestName].cancel = c 22 | 23 | }) 24 | } 25 | return config 26 | }, error => { 27 | return Promise.reject(error) 28 | }) 29 | 30 | axios.interceptors.response.use(config => { 31 | cancelFlag = true 32 | Indicator.close() 33 | return config 34 | }, error => { 35 | cancelFlag = true 36 | Indicator.close() 37 | if (error && error.response) { 38 | switch (error.response.status) { 39 | case 400: 40 | error.message = '错误请求' 41 | break; 42 | case 401: 43 | error.message = '未授权，请重新登录' 44 | break; 45 | case 403: 46 | error.message = '拒绝访问' 47 | break; 48 | case 404: 49 | error.message = '请求错误,未找到该资源' 50 | break; 51 | case 405: 52 | error.message = '请求方法未允许' 53 | break; 54 | case 408: 55 | error.message = '请求超时' 56 | break; 57 | case 500: 58 | error.message = '服务器端出错' 59 | break; 60 | case 501: 61 | error.message = '网络未实现' 62 | break; 63 | case 502: 64 | error.message = '网络错误' 65 | break; 66 | case 503: 67 | error.message = '服务不可用' 68 | break; 69 | case 504: 70 | error.message = '网络超时' 71 | break; 72 | case 505: 73 | error.message = 'http版本不支持该请求' 74 | break; 75 | default: 76 | error.message = `连接错误${error.response.status}` 77 | } 78 | } else { 79 | error.message = "连接到服务器失败" 80 | } 81 | return Promise.reject(error.message) 82 | }) 83 | 84 | export default axios -------------------------------------------------------------------------------- /utils/http.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from './axios' 3 | import 'mint-ui/lib/style.css'; 4 | import {Toast} from 'mint-ui' 5 | Vue.component(Toast) 6 | export function post (url, data, error) { 7 | return new Promise((resolve, reject) => { 8 | axios.post(url, data).then(res => { 9 | resolve(res) 10 | }, err => { 11 | err = error ? error : err 12 | Toast({ 13 | message: err, 14 | duration: 500 15 | }) 16 | }) 17 | }) 18 | } 19 | export function get (url, data, error) { 20 | return new Promise((resolve, reject) => { 21 | axios.post(url, data).then(res => { 22 | resolve(res) 23 | }, err => { 24 | err = error ? error : err 25 | Toast({ 26 | message: err, 27 | duration: 500 28 | }) 29 | }) 30 | }) 31 | } --------------------------------------------------------------------------------