网站首页 > 技术文章 正文
1. 前端文件上传流程
- 选择文件:
- 用户点击上传按钮,选择要上传的文件。
- 使用 <input type="file"> 或 FileReader API 读取文件。
- 文件校验:
- 校验文件的大小、格式等信息,提前过滤掉不符合要求的文件,避免浪费资源。
- 发送请求:
- 创建一个 FormData 对象,将文件内容以及其他相关参数(如文件名、类型等)追加到该对象中。
- 通过 fetch 或 axios 发送 HTTP POST 请求,将文件数据传输到服务器。
- 处理响应:
- 根据服务器响应处理上传结果,比如展示成功、失败信息或进行错误重试。
- 如果是分片上传,需追踪每一片的状态和位置。
- 显示上传进度(可选):
- 使用 xhr.upload.onprogress 或 axios 的 onUploadProgress 事件实时更新上传进度条。
2. 封装文件上传组件
一个简单的上传组件封装可以包括以下内容:
import React, { useState } from 'react';
import axios from 'axios';
const UploadComponent = ({ uploadUrl }) => {
const [progress, setProgress] = useState(0);
const [status, setStatus] = useState('');
const handleFileChange = async (event) => {
const file = event.target.files[0];
if (!file) return;
// 文件大小限制(如10MB)
if (file.size > 10 * 1024 * 1024) {
alert('文件太大');
return;
}
// FormData 用于文件上传
const formData = new FormData();
formData.append('file', file);
try {
setStatus('Uploading...');
const response = await axios.post(uploadUrl, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
setProgress(percent);
},
});
setStatus('Upload successful');
console.log('Server response:', response.data);
} catch (error) {
setStatus('Upload failed');
console.error('Upload error:', error);
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<p>Progress: {progress}%</p>
<p>Status: {status}</p>
</div>
);
};
export default UploadComponent;
3. 关键部分的说明
- 文件大小限制:封装文件上传组件时,确保在组件内部处理文件大小、类型等校验。
- 进度展示:onUploadProgress 回调可以实时显示上传进度。
- 错误处理:增加 try-catch 处理上传过程中的错误,保证上传失败时能给用户提示。
4. 后端支持
后端应有对应的文件接收接口,处理 multipart/form-data 格式的请求,存储文件并返回响应
- 上一篇: 使用JS请求上传图片并实现加载进度条
- 下一篇: 投稿功能怎么做?多图片与多视频上传的要点
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)