配置跨域、增加重命名字段、前端上传功能

README.md

@@ -0,0 +1,29 @@
+# Collecting —— 文件、截图收集工具 
+
+广泛用于类似团支书收截图，班长收文件等以班级为单位的文件收集项目；  
+如果你也被强制投票，强制青年大学习等经历，你就知道它用在哪了。  
+
+拥有自动重命名、一键打包下载等便捷功能。
+
+## 提要
+这是一个以好玩为目的而开发的项目，且 80% 的代码由 iPad 编写（使用 play.js 进行调试开发）  
+使用 Vue.js + node.js 完成  
+https://blog.shellbin.me/?p=1690
+
+## 项目特点
+1. 超轻页面  
+超级轻量化的设计可以保证在网络环境恶劣的教室也能迅速加载页面
+2. 图片自动压缩  
+若上传文件类型为图片，则自动压缩图片。无论下载还是上传都可以更快更轻松
+3. 免注册登录一键上传  
+不要把使用时间成本由收集者转嫁给上传者
+4. 自动重命名  
+提供了 ```姓名 学号 身份证号 任务名``` 四种可供配置的文件命名模板
+5. 一键打包下载  
+收集者下载好压缩包就可以直接上交给形式主义上级了
+
+## 部署与使用说明
+说明编写中
+
+## 状态
+代码编写中

package.json

@@ -6,6 +6,7 @@
     "axios": "^0.21.0",
     "babel-loader": "8.x.x",
     "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
     "css-loader": "^3.2.0",
     "express": "4.16.x",
     "file-loader": "^4.2.0",

server/index.js

@@ -1,6 +1,7 @@
 const express = require('express')
 const bodyParser = require('body-parser')
 const multer = require('multer')
+const cors = require('cors')
 
 const config = require('./config')
 const indexPage = require('./indexPage')
@@ -11,6 +12,7 @@ const upload = multer({dest: config.fs.path})
 
 server.use(bodyParser.json())
 server.use(bodyParser.urlencoded({ extended: false }))
+server.use(cors())
 
 server.listen(config.http.port)
 server.use('/api/v1/',router)

server/indexPage/upload-file.js

@@ -22,8 +22,8 @@ function uploadFile (req, res) {
     if (indexStuInfo(req.headers.stuid)) {
         console.log(`${stuName} (${req.connection.remoteAddress}) uploaded ${req.file.originalname}`)
 
-        // 姓名 学号 身份证号
-        const naming = data.namingRules.replace(/姓名/g,stuName).replace(/身份证号/g, idCard).replace(/学号/g, fullStuId)
+        // 姓名 学号 身份证号 任务名
+        const naming = data.namingRules.replace(/姓名/g,stuName).replace(/身份证号/g, idCard).replace(/学号/g, fullStuId).replace(/任务名/g, data.titleName)
         const newName = `${naming}` + '.' + req.file.originalname.split('.').pop()
         fs.renameSync(req.file.path, config.fs.path + newName)
 
@@ -32,6 +32,7 @@ function uploadFile (req, res) {
             finalFileName: newName
         })
     } else {
+        fs.unlinkSync(req.file.path)
         res.status(403).send({
             status: 'error',
             message: '用户不存在'

src/pages/IndexPage.vue

@@ -5,25 +5,32 @@
       <div class="info">
         <p class="intro">是一项仅面向 {{className}} 的轻量服务</p>
         <p class="intro">填写信息一键提交，重命名等破事后台会帮你搞定</p>
-        <p class="intro">同时，收集文件、截图的同学也可以一键打包下载全班文件</p>
-        <div class="forms">
-          <label>学号后三位：</label>
-          <input v-model.lazy="stuId" placeholder="">
-        </div>
+        <p class="intro">同时，收集文件截图的同学也可以一键打包下载全班文件</p>
       </div>
-      <input type="file"/>
-      <p>第二次提交将会覆盖上一次的提交</p>
+
+      <div v-show="!haveStarted" class="forms">
+        <label>学号后三位：</label>
+        <input v-model.lazy="stuId" placeholder="">
+        <br>
+        <input type="file" ref="file">
+      </div>
+
+      <h2>状态：{{ displayStatus }}</h2>
+      <h3>{{ displayMessage }}</h3>
+
       <div class="button start" role="button" v-show="!haveStarted" @click="uploadStart">
         <span>上传文件</span>
       </div>
-      <div class="progress-wrap">
-        <p>上传进度</p>
-        <p class="progress"><span :style="style"></span></p>
+      <div class="button start" role="button" v-show="isError" @click="back">
+        <span>返回</span>
       </div>
+
+      <p>第二次提交将会覆盖上一次的提交</p>
     </div>
 
    <div id="alert_layer" v-if="!haveAnyTask">
      <h2>当前没有文件需要上传</h2>
+     <p>或网速太慢获取不到任务（小声</p>
    </div>
 
   </div>
@@ -38,30 +45,52 @@ export default {
       titleName: '文件',
       className: '某校某系某班',
       haveStarted: false,
+      isError: false,
       stuId: '',
-      fileSize: ''
+      displayStatus: '等待上传中',
+      displayMessage : ''
     }
   },
   mounted() {
     this.fetchTask()
-  },
-  change(e) {
-
   },
   methods: {
     uploadStart () {
       if (this.haveStarted === true) {
         alert('上传已经开始')
       } else {
         this.haveStarted = true
-        this.upload()
-      }
-    },
-    upload () {
+      }if (parseInt(this.stuId) > 0) {
+        this.displayStatus = '文件正在上传...'
+        this.displayMessage = '当前进度 0%'
 
+        const file = this.$refs.file.files[0]
+        const data = new FormData()
+        data.append('file', file)
+        this.axios.post('http://localhost:8089/api/v1/uploadFile', data, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            'stuId': this.stuId
+          },onUploadProgress: function (progressEvent){
+            this.displayMessage = '当前进度 ' + (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
+          } })
+            .then(res => {
+              if(res.data.status === 'success') {this.displayStatus = '上传成功'; this.displayMessage = '当前命名：' + res.data.finalFileName}
+            })
+            .catch((error) => {
+              this.displayStatus = '上传失败'
+              this.displayMessage = '检查学号后三位是否填写正确'
+              this.isError = true
+              console.log(error)
+            })
+      } else {
+        this.displayStatus = '还不能开始上传'
+        this.displayMessage = '你真的有在好好填学号后三位吗？'
+        this.isError = true
+      }
     },
     fetchTask () {
-      this.axios.get('http://127.0.0.1:8089/api/v1/fetchTask')
+      this.axios.get('http://localhost:8089/api/v1/fetchTask')
         .then((response) => {
           if(response.data.status === 'ok') {
             this.haveAnyTask = response.data.haveAnyTask
@@ -72,6 +101,12 @@ export default {
         .catch(function (error) {
           console.log(error)
         })
+    },
+    back () {
+      this.isError = false
+      this.haveStarted = false
+      this.displayStatus = '等待上传中'
+      this.displayMessage = '希望这次你能成功上传'
     }
   }
 }