一、从前端上传文件到后端被拦截
在上传文件时，由于网络传输的不确定性，文件会有被恶意篡改或者上传非法文件的可能性。为了保证上传文件的安全性，需要从以下几个方面进行防范：
1、前端对上传文件进行校验，限制上传的文件类型、大小等；
<form id="fileUploadForm">
<input type="file" name="file" id="file" onchange="checkFile(this)" />
</form>
<script>
function checkFile(fileDom) {
const file = fileDom.files[0];
const fileSize = file.size;
const fileType = file.type;
const maxSize = 1024 * 1024;
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(fileType)) {
alert('只支持上传jpg/png/gif图片！');
fileDom.value = '';
return false;
}
if (fileSize > maxSize) {
alert('文件大小不能超过1MB！');
fileDom.value = '';
return false;
}
return true;
}
</script>
2、后端对上传文件的类型、大小、内容进行校验，防止上传非法文件；
// 基于express框架的中间件，对上传文件进行校验
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
const fileFilter = function(req, file, cb) {
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png' || file.mimetype === 'image/gif') {
cb(null, true);
} else {
cb(null, false);
}
};
const upload = multer({ storage: storage, fileFilter: fileFilter });
// 后端接口，接收上传的文件
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('上传成功！');
});
3、采用HTTPS协议进行传输，增加安全性。前端可以使用XMLHttpRequest对象或者fetch API进行传输，后端需要安装SSL/TLS证书，配置HTTPS协议。
// 前端使用fetch API上传文件
const formdata = new FormData();
formdata.append('file', fileDom.files[0]);
fetch('/upload', {
method: 'POST',
body: formdata,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
二、前端批量上传文件带参数到后端
如果需要批量上传文件，并且需要传递参数给后端进行处理，可以使用FormData对象实现。FormData对象可以将表单元素和键值对序列化成一个字符串，可以用于将数据发送给服务器。
<form id="filesUploadForm">
<input type="file" name="file" id="file" multiple />
<input type="text" name="name" />
</form>
<script>
function uploadFiles() {
const formdata = new FormData();
const files = document.getElementById('file').files;
for (let i = 0; i < files.length; i++) {
formdata.append('files', files[i]);
}
const name = document.getElementsByName('name')[0].value;
formdata.append('name', name);
fetch('/upload', {
method: 'POST',
body: formdata
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
}
</script>
三、前端上传文件后端对应的接口
在前端上传文件后，后端对应的接口需要能够接收文件并进行处理。对于Node.js服务器，可以使用multer中间件来解析请求体中的文件部分。
// 基于express框架的中间件，解析请求体中的文件并保存到指定路径下
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
const upload = multer({ storage: storage });
// 后端接口，接收上传的文件
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('上传成功！');
});
四、vue上传文件到后端
Vue框架中可以使用axios库实现上传文件。Axios库是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js的HTTP通信。
<template>
<div>
<input type="file" @change="uploadFile">
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
const formdata = new FormData();
formdata.append('file', file);
axios.post('/upload', formdata, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
}
}
}
</script>
五、前端上传文件后端怎么接收
后端接收上传文件时，需要通过multipart/form-data格式进行接收。在Node.js中，可以使用formidable或multer中间件来解析multipart/form-data格式的请求体。
// 基于express框架的中间件，解析multipart/form-data格式的请求体
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
const upload = multer({ storage: storage });
// 后端接口，接收上传的文件
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('上传成功！');
});
六、react上传文件到后端
在React框架中，可以使用fetch API来上传文件。fetch API是一套基于fetch()方法的新一代网络通信API，可以用于浏览器和Node.js的HTTP通信。
import React, { useState } from 'react';
const FileUpload = () => {
const [file, setFile] = useState(null);
const onChangeHandler = e => {
setFile(e.target.files[0]);
};
const onClickHandler = () => {
const formdata = new FormData();
formdata.append('file', file);
fetch('/upload', {
method: 'POST',
body: formdata,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
};
return (
<input type="file" onChange={onChangeHandler} />
);
};
export default FileUpload;
七、前端上传文件代码
前端上传文件需要通过表单的方式进行提交。在表单中，需要添加enctype="multipart/form-data"属性，使得表单可以支持上传文件。
<form id="fileUploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<button type="button" onclick="uploadFile()">上传
</form>
<script>
function uploadFile() {
const fileDom = document.getElementById('file');
const formdata = new FormData();
formdata.append('file', fileDom.files[0]);
fetch('/upload', {
method: 'POST',
body: formdata,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
}
</script>
八、前端文件上传到后端
前端文件上传需要使用表单进行提交，并且需要设置enctype="multipart/form-data"属性。后端接收到上传的文件后，需要使用multer或formidable中间件进行解析。
// 基于express框架的中间件，解析multipart/form-data格式的请求体
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
const upload = multer({ storage: storage });
// 后端接口，接收上传的文件
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('上传成功！');
});
九、前端上传文件按钮样式选取
前端上传文件按钮的样式可以通过CSS进行自定义。以下是一种实现方法：
<style>
.file-upload {
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
color: #555;
font-size: 1em;
}
.file-upload:hover {
background-color: #f5f5f5;
}
.file-upload input[type="file"] {
display: none;
}
.file-upload-label {
font-weight: normal;
}
.file-upload input[type="file"] + .file-upload-label:before {
content: "选择文件";
display: inline-block;
background-color: #4083FF;
color: #fff;
padding: 6px 12px;
cursor: pointer;
border-radius: 4px;
}
.file-upload input[type="file"] + .file-upload-label:hover:before {
background-color: #3066BE;
}
</style>
<label class="file-upload">
<input type="file" name="file" id="file" />
<span class="file-upload-label"></span>
</label>
