前端：
<!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();"> --><inputtype="file"class="file"multipleonsubmit="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"]
}
最新配置)
