前端:
<!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"
]
}