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

news2025/4/18 4:09:31

一、优势

提高上传速度：前端直传利用了浏览器与 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,//你的阿里云秘钥ID
    accessKeySecret: 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.com
    secure: 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>
)
}

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