前端监控文件上传进度

2023-12-13 16:39:52

前端：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <form  method="post" onsubmit="event.preventDefault();"> -->
    <input
      type="file"
      class="file"
      multiple
      onsubmit="event.preventDefault();"
    />
    <h1 class="upload-title"></h1>
    <button class="cancle-upload">取消上传</button>
    <!-- </form> -->
  </body>
</html>
<script>
  let file = document.querySelector('.file');
  let uploadTitle = document.querySelector('.upload-title');
  let cancleUpload = document.querySelector('.cancle-upload');
  cancleUpload.addEventListener('click', function (e) {
    e.preventDefault();
    window.xhr?.abort();
    window.xhr = null;
  });
  function getFormData(file) {
    let formData = new FormData();
    formData.append('file', file);
    return formData;
  }
  function getXhr(formData) {
    let xhr = new XMLHttpRequest();
    xhr.open('post', 'http://localhost:3333/test', true);
    return xhr;
  }
  function addListenerXhr(xhr, formData) {
    xhr.upload.onload = function () {
      console.log('end');
      uploadTitle.innerHTML = '上传完成';
    };
    xhr.upload.ontimeout = function () {
      console.log('timeout');
      uploadTitle.innerHTML = '上传超时';
    };
    xhr.upload.onerror = function () {
      console.log('error');
      uploadTitle.innerHTML = '上传失败';
    };
    xhr.upload.onabort = function () {
      console.log('abort');
      uploadTitle.innerHTML = '上传取消';
    };
    xhr.upload.onprogress = function (e) {
      console.log(Math.floor((e.loaded / e.total) * 100) + '%');
      uploadTitle.innerHTML =
        '上传中 ' + Math.floor((e.loaded / e.total) * 100) + '%' + e.type;
    };
    xhr.upload.onloadstart = function () {
      console.log('start');
      uploadTitle.innerHTML = '开始上传';
    };
    xhr.send(formData);
  }
  file.addEventListener('change', function (e) {
    e.preventDefault();
    let file = this.files[0];
    let formData = getFormData(file);
    let xhr = getXhr(formData);
    addListenerXhr(xhr, formData);
  });
</script>

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"
  ]
}

文章来源:https://blog.csdn.net/gu2022_3_5_21_23/article/details/134837859
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。