前后端分离react如何上传附件
前后端分离React上传附件的方法
在前后端分离的架构中，React前端通常通过HTTP请求与后端API交互。上传附件通常使用multipart/form-data格式，以下是具体实现方法：
使用HTML表单和FormData对象
创建一个包含文件输入的表单，使用FormData对象封装文件数据：
import React, { useState } from 'react';
function FileUpload() {
const [file, setFile] = useState(null);
const handleFileChange = (e) => {
setFile(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});
const result = await response.json();
console.log(result);
} catch (error) {
console.error('Error:', error);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="file" onChange={handleFileChange} />
<button type="submit">Upload</button>
</form>
);
}使用axios发送文件
如果项目中使用axios，可以通过类似方式发送文件：
import axios from 'axios';
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
try {
const response = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
};后端接口处理
后端需要支持multipart/form-data格式的请求。以Node.js Express为例：
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/api/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.json({ message: 'File uploaded successfully' });
});文件类型和大小限制
可以在前端添加验证：
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile.size > 5 * 1024 * 1024) {
alert('File size exceeds 5MB limit');
return;
}
if (!['image/jpeg', 'image/png'].includes(selectedFile.type)) {
alert('Only JPEG and PNG files are allowed');
return;
}
setFile(selectedFile);
};进度显示
使用axios可以显示上传进度：
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
const config = {
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`${percentCompleted}% uploaded`);
},
};
try {
const response = await axios.post('/api/upload', formData, config);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
};多文件上传
支持多文件上传需要调整表单和FormData处理：
const [files, setFiles] = useState([]);
const handleFileChange = (e) => {
setFiles([...e.target.files]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
files.forEach((file) => {
formData.append('files', file);
});
// 其余上传逻辑相同
};后端需要相应调整：
app.post('/api/upload', upload.array('files'), (req, res) => {
console.log(req.files);
res.json({ message: 'Files uploaded successfully' });
});以上方法涵盖了React前端上传附件的主要场景和技术要点，可根据实际需求进行调整和扩展。
