前端压缩完成

package.json

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

server/adminPage/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+    login: require('./login'),
+    setTask: require('./set-task'),
+    downloadFiles: require('./download-files')
+}

server/config.js

@@ -4,7 +4,7 @@ module.exports = {
         host: ''
     },
     fs: {
-        path: './uploads-temp/'
+        path: './uploads/'
     },
     admin: {
         password: 'password',

server/index.js

@@ -5,10 +5,11 @@ const cors = require('cors')
 
 const config = require('./config')
 const indexPage = require('./indexPage')
+const adminPage = require('./adminPage')
 
 const server = express()
 const router = express.Router()
-const upload = multer({dest: config.fs.path})
+const upload = multer({dest: './uploads-temp/'})
 
 server.use(bodyParser.json())
 server.use(bodyParser.urlencoded({ extended: false }))
@@ -21,5 +22,7 @@ server.use('/api/v1/',router)
 router.get('/fetchTask',indexPage.fetchTask)
 // API: 处理上传的文件
 router.post('/uploadFile',upload.single('file'),indexPage.uploadFile)
+// API: 处理登录操作
+// router.post('/login',adminPage.login)
 
 console.log('Server is running at '+config.http.port+' port, hostname/api/v1/')

server/indexPage/upload-file.js

@@ -19,6 +19,7 @@ function indexStuInfo(stuId) {
 }
 
 function uploadFile (req, res) {
+    console.log(req.file)
     if (indexStuInfo(req.headers.stuid)) {
         console.log(`${stuName} (${req.connection.remoteAddress}) uploaded ${req.file.originalname}`)
 

src/pages/IndexPage.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import Compressor from 'compressorjs';
+
 export default {
   name: 'IndexPage',
   data () {
@@ -56,39 +58,58 @@ export default {
   },
   methods: {
     uploadStart () {
+      const thisFile = this.$refs.file.files[0]
       if (this.haveStarted === true) {
         alert('上传已经开始')
       } else {
         this.haveStarted = true
-      }if (parseInt(this.stuId) > 0) {
+      }if (parseInt(this.stuId) > 0 && thisFile) {
         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)
-            })
+        if(thisFile.type === ('image/png'||'image/jpeg')) {
+          //压缩并发送
+          this.compressedPic(thisFile)
+        } else {
+          //直接发送
+          this.uploadFile(thisFile)
+        }
       } else {
         this.displayStatus = '还不能开始上传'
-        this.displayMessage = '你真的有在好好填学号后三位吗？'
+        this.displayMessage = '学号和文件是不是有什么没填好的？'
         this.isError = true
       }
     },
+    compressedPic(pic) {
+      this.displayMessage = '图片正在压缩'
+      new Compressor(pic,{
+        quality:0.5,
+        maxWidth:720,
+        success: (result) => {
+          this.uploadFile(new File([result], result.name, {type: result.type}))
+          console.log('图片已被压缩')
+        }
+      })
+    },
+    uploadFile(file) {
+      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: (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)
+          })
+    },
     fetchTask () {
       this.axios.get('http://localhost:8089/api/v1/fetchTask')
         .then((response) => {