当前位置：首页 > article >正文

react实现上传图片到阿里云OSS以及问题解决（保姆级）

article 2026/1/31 20:21:58

一、优势

提高上传速度：前端直传利用了浏览器与 OSS 之间的直接连接，能够充分利用用户的网络带宽。相比之下，后端传递文件时，文件需要经过后端服务器的中转，可能会受到后端服务器网络环境和处理能力的限制，从而影响上传速度。此外，前端直传还可以通过并发上传等方式进一步提高上传效率。

优化用户体验：由于前端直传能够提高上传速度，用户在上传文件时能够更快地看到上传进度和完成结果，减少等待时间，从而提升用户体验。同时，前端直传可以在前端实现更友好的上传交互，如实时显示上传进度条、支持断点续传等功能，让用户对上传过程有更好的掌控感。

降低开发成本：使用前端直传可以简化后端代码的编写，减少后端处理文件上传的逻辑和代码量。后端开发人员不需要再处理文件的接收、存储和转发等操作，只需要提供必要的认证和授权信息即可。这有助于降低开发成本，提高开发效率，使开发人员能够更专注于核心业务功能的实现。

增强系统可扩展性：当系统面临高并发的文件上传需求时，前端直传方式可以更好地应对扩展。因为 OSS 具有良好的扩展性和高可用性，能够自动处理大量的并发上传请求，而不会像后端传递那样受到后端服务器性能的限制。通过前端直传，可以将文件上传的压力分散到 OSS 上，使系统更容易扩展以满足不断增长的业务需求。

二、配置阿里云OSS

1.首先要有一个阿里云账号（搜索对象存储OSS）

2.创建一个bucket

起一个自己的bucket的名称

3.参考文档

找到左下角的SDK下载，我这里是前端应用我就选择了node.js

点击之后能够查看相关的一些配置和使用过程

import OSS from "ali-oss";const EditUser = () => {const [files, setFiles] = useState<FileItem[]>([]);const [isUploading, setIsUploading] = useState(false);const [previewUrl, setPreviewUrl] = useState(""); // 定义类型type FileItem = {name: string;url: string;};// OSS 配置常量const OSS_CONFIG = {accessKeyId: import.meta.env.VITE_OSS_ACCESS_KEY_ID,//你的阿里云秘钥IDaccessKeySecret: import.meta.env.VITE_OSS_ACCESS_KEY_SECRET,//你的阿里云秘钥密码region: import.meta.env.VITE_OSS_REGION,//bucket地域，比如我的是北京就填写‘oss-cn-beijing’bucket: import.meta.env.VITE_OSS_BUCKET,//你的bucket名称endpoint: import.meta.env.VITE_OSS_ENDPOINT,阿里云域名，类比上方oss-cn-beijing.aliyuncs.comsecure: true, // 使用 HTTPS};// 初始化 OSS 客户端const client = new OSS(OSS_CONFIG);const handleUpload = async (file: File) => {if (!file) return;try {setIsUploading(true);const fileName = `${Date.now()}_${file.name}`;const result = await client.put(fileName, file);const fileUrl = `https://${OSS_CONFIG.bucket}.${OSS_CONFIG.region}.aliyuncs.com/${result.name}`;setFiles((prev) => [...prev, { name: file.name, url: fileUrl }]);setPreviewUrl(fileUrl);//可访问的云上图片地址} catch (error) {console.error("文件上传失败:", error);message.error("文件上传失败");} finally {setIsUploading(false);}};const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {const file = e.target.files?.[0];if (file) {handleUpload(file);}e.target.value = "";};const triggerFileInput = () => {const input = document.createElement("input");input.type = "file";input.onchange = (e: Event) =>handleFileChange(e as unknown as React.ChangeEvent<HTMLInputElement>);input.click();};return(<div  onClick={triggerFileInput}>
上传文件</div>
)
}

这就是一个完整的上传过程