前端监控文件上传进度

前端：

  
    
    
    
  
  
    
    
    

    取消上传
    
  

server：

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();
const qs = require('qs');
const querystring = require('querystring');
app.use(cors());

// app.setHeader('Access-Control-Allow-Origin', '*');
// 设置存储位置和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads'); // 设置文件存储位置
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); // 设置文件名
  }
});

const upload = multer({ storage: storage });

// 使用 upload.single('file') 中间件处理上传的文件
app.post('/test', upload.single('file'), (req, res) => {
  console.log(req.file); // 打印接收到的文件
  // res.set('Access-Control-Allow-Origin', 'http://localhost:3333');
  res.send({
    ret_code: '0',
    msg: 'success',
    data: req.file
  });
  // res.set('content-type', 'multipart/form-data');
});

// app.listen(3000, () => console.log('Server started on port 3000'));
app.listen(3333, () => {
  console.log('server is running at port 3000');
});


let obj = {
    a:1111,
    v:333
}
// console.log(qs.stringify(obj));
// console.log(querystring.stringify(obj));

依赖：

{
  "name": "myvue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint  test1.js   --ext .js src/",
    "lint:fix": "eslint test1.js  --ext  .js src/ vue-cli-plugin-gyk/  --fix",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "qs": "^6.11.2",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^8.50.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-vue": "^9.17.0",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "vue-cli-plugin-gyk": "~1.0.1",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}