[ { "path": ".editorconfig", "content": "[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\napp/run\nserver/app/public/\nserver/app/run/\nserver/run/\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n.env.test\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and *not* Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2020 woniuppp\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# file-upload\n面试造火箭系列\n\n\n 1. vue create client\n 2. cd client && vue add element\n 3. mkdir server\n 4. npm install egg egg-bin --save" }, { "path": "client/.gitignore", "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": "client/README.md", "content": "# client\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Run your tests\n```\nnpm run test\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "client/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "client/package.json", "content": "{\n \"name\": \"client\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\",\n \"start\": \"npm run serve\"\n },\n \"dependencies\": {\n \"axios\": \"^0.19.2\",\n \"blessed\": \"^0.1.81\",\n \"blessed-contrib\": \"^4.8.18\",\n \"core-js\": \"^3.6.4\",\n \"element-ui\": \"^2.4.5\",\n \"marked\": \"^0.8.0\",\n \"spark-md5\": \"^3.0.0\",\n \"stylus\": \"^0.54.7\",\n \"stylus-loader\": \"^3.0.2\",\n \"vue\": \"^2.6.11\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"^4.2.0\",\n \"@vue/cli-plugin-eslint\": \"^4.2.0\",\n \"@vue/cli-service\": \"^4.2.0\",\n \"babel-eslint\": \"^10.0.3\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^6.1.2\",\n \"vue-cli-plugin-element\": \"^1.0.1\",\n \"vue-template-compiler\": \"^2.6.11\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/essential\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\"\n ]\n}\n" }, { "path": "client/public/hash.js", "content": "\n\n// web-worker\nself.importScripts('spark-md5.min.js')\n\nself.onmessage = e=>{\n // 接受主线程的通知\n const {chunks} = e.data\n const spark = new self.SparkMD5.ArrayBuffer()\n let progress = 0\n let count = 0\n \n const loadNext = index=>{\n const reader = new FileReader()\n reader.readAsArrayBuffer(chunks[index].file)\n reader.onload = e=>{\n // 累加器 不能依赖index，\n count++\n // 增量计算md5\n spark.append(e.target.result)\n if(count===chunks.length){\n // 通知主线程，计算结束\n self.postMessage({\n progress:100,\n hash:spark.end()\n })\n }else{\n // 每个区块计算结束，通知进度即可\n progress += 100/chunks.length\n self.postMessage({\n progress\n })\n // 计算下一个\n loadNext(count)\n }\n }\n }\n // 启动\n loadNext(0)\n\n\n}" }, { "path": "client/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
\n \n \n\n" }, { "path": "client/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "client/src/components/HelloWorld.vue", "content": "\n\n\n\n\n\n" }, { "path": "client/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport axios from 'axios'\nimport './plugins/element.js'\n\nlet request = axios.create({\n baseURL:\"/api\"\n})\n\n\nrequest.interceptors.response.use(\n async response=>{\n // header config这里处理就可以了，应用层只需要数据data\n let {data} = response\n // if(dat)\n return data\n\n }\n)\nVue.prototype.$axios = request\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n" }, { "path": "client/src/plugins/element.js", "content": "import Vue from 'vue'\nimport Element from 'element-ui'\nimport 'element-ui/lib/theme-chalk/index.css'\n\nVue.use(Element)\n" }, { "path": "client/vue.config.js", "content": "module.exports = {\n devServer: {\n proxy:{\n '/api/':{\n target:'http://localhost:7001',\n secure:false,\n pathRewrite:{\n '^/api':''\n }\n }\n }\n }\n}\n" }, { "path": "index.html", "content": "\n \n
\n
\n
\n
\n 水波效果\n
" }, { "path": "server/app/controller/home.js", "content": "// app/controller/home.js\nconst path = require('path')\nconst fse = require(\"fs-extra\")\n\nconst Controller = require('egg').Controller;\n\nclass HomeController extends Controller {\n async index() {\n this.ctx.body = {\n msg:'hello eggjs'\n }\n }\n async merge(){\n const {ext,size,hash} = this.ctx.request.body\n const filePath = path.resolve(this.config.UPLOAD_DIR, `${hash}.${ext}`)\n await this.ctx.service.upload.mergeFileChunk(filePath, hash, size)\n this.ctx.body = {\n code:0,\n msg:'合并成功'\n }\n\n }\n async getUploadedList(dirPath){\n return fse.existsSync(dirPath) \n ? (await fse.readdir(dirPath)).filter(name=>name[0]!=='.') // 过滤诡异的隐藏文件 比如.DS_store\n : []\n }\n async check(){\n const { ext, hash } = this.ctx.request.body\n const filePath = path.resolve(this.config.UPLOAD_DIR, `${hash}.${ext}`)\n console.log(filePath)\n // 文件是否存在\n let uploaded = false\n let uploadedList = []\n if (fse.existsSync(filePath)) {\n // 存在文件，直接返回已上传\n uploaded = true\n }else{\n // 文件没有完全上传完毕，但是可能存在部分切片上传完毕了\n uploadedList = await this.getUploadedList(path.resolve(this.config.UPLOAD_DIR, hash))\n }\n\n this.ctx.body = {\n code:0,\n uploaded,\n uploadedList // 过滤诡异的隐藏文件\n }\n } \n async upload(){\n const { ctx } = this\n if(Math.random()<0.5){\n // 随机报个错\n return ctx.status = 500;\n }\n const file = ctx.request.files[0]\n const {chunkname,ext,hash} = ctx.request.body\n console.log(file,hash,chunkname,ext)\n const filename = `${hash}.${ext}`\n // 最终文件存储位置 根据chunkname获取后缀，名字用hash\n const filePath = path.resolve(\n this.config.UPLOAD_DIR,\n filename\n )\n // 碎片文件夹，用hash命名\n const chunkPath = path.resolve(this.config.UPLOAD_DIR, hash )\n\n // 文件存在直接返回\n if (fse.existsSync(filePath)) {\n this.ctx.body = {\n code:-1,\n msg:'文件存在',\n url:`/public/${filename}`\n }\n return\n }\n if (!fse.existsSync(this.config.UPLOAD_DIR)) {\n await fse.mkdirs(this.config.UPLOAD_DIR)\n }\n await fse.move(file.filepath, `${chunkPath}/${chunkname}`)\n this.ctx.body={\n code:0,\n msg:'上传成功',\n url:`/public/${filename}`\n }\n\n\n }\n}\n\nmodule.exports = HomeController;" }, { "path": "server/app/router.js", "content": "// app/router.js\nmodule.exports = app => {\n const { router, controller } = app;\n router.get('/index', controller.home.index);\n router.post('/upload', controller.home.upload);\n router.post('/merge', controller.home.merge);\n router.post('/check', controller.home.check);\n};" }, { "path": "server/app/service/upload.js", "content": "// app/service/upload.js\nconst path = require('path')\nconst fse = require('fs-extra')\nconst Service = require('egg').Service;\n\nclass UploadService extends Service {\n\n extractExt(filename) {\n return filename.slice(filename.lastIndexOf(\".\"), filename.length)\n }\n async mergeFiles(files, dest, size) {\n const pipeStream = (filePath, writeStream) =>\n new Promise(resolve => {\n const readStream = fse.createReadStream(filePath)\n readStream.on(\"end\", () => {\n // 删除文件\n fse.unlinkSync(filePath)\n resolve()\n })\n readStream.pipe(writeStream)\n })\n\n await Promise.all(\n files.map((file, index) =>\n pipeStream(\n file,\n // 指定位置创建可写流 加一个put避免文件夹和文件重名\n // hash后不存在这个问题，因为文件夹没有后缀\n // fse.createWriteStream(path.resolve(dest, '../', 'out' + filename), {\n fse.createWriteStream(dest, {\n start: index * size,\n end: (index + 1) * size\n })\n )\n )\n )\n\n }\n\n async mergeFileChunk(filePath, fileHash, size){\n const chunkDir = path.resolve(this.config.UPLOAD_DIR, fileHash)\n let chunkPaths = await fse.readdir(chunkDir)\n // 根据切片下标进行排序\n // 否则直接读取目录的获得的顺序可能会错乱\n chunkPaths\n .sort((a, b) => a.split(\"-\")[1] - b.split(\"-\")[1])\n chunkPaths = chunkPaths.map(cp => path.resolve(chunkDir, cp)) // 转成文件路径\n await this.mergeFiles(chunkPaths, filePath, size)\n }\n}\nmodule.exports = UploadService;" }, { "path": "server/config/config.default.js", "content": "// config/config.default.js\nconst path = require('path')\nmodule.exports = appInfo => {\n const config = {};\n config.keys = 'shengxinjign@!#rocks!';\n // config.middleware = ['cors'];\n config.multipart = {\n mode: 'file',\n // multipart: {\n // },\n whitelist: ()=>true\n\n\n }\n config.security = {\n csrf: {\n enable: false\n },\n }\n config.UPLOAD_DIR = path.resolve(__dirname, \"..\", \"app/public\"); // 大文件存储目录\n\n return config;\n};" }, { "path": "server/package.json", "content": "{\n \"name\": \"server\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"egg-bin dev\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"egg\": \"^2.26.0\",\n \"egg-bin\": \"^4.14.1\",\n \"egg-cors\": \"^2.2.3\",\n \"fs-extra\": \"^8.1.0\"\n }\n}\n" } ]