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

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

news 来源：原创 2025/9/6 11:52:56

一、优势

提高上传速度：前端直传利用了浏览器与 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>
)
}

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

三、配置阿里云秘钥ID和密码

点击头像找到AccessKey

自己创建一个（建议保存到本地）

四、过程中可能遇到的问题及解决方案

1.秘钥和ID以及名称都写对的情况下出现CORS问题

点击bucket名称进入详情页面

找到跨域设置

按照我这个配置

2.拿到返回的地址之后无法访问照片

依旧在bucket详情里找到公共访问，把阻止公共访问关闭并开启公共读

这样就能正常看到图片了

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

一、优势提高上传速度：前端直传利用了浏览器与 OSS 之间的直接连接，能够充分利用用户的网络带宽。相比之下，后端传递文件时，文件需要经过后端服务器的中转，可能会受到后端服务器网络环境和处理能力的限制，…...

编程日记 2025/9/6 11:52:56

嵌入式学习笔记——ARM-中断与异常

文章目录中断与异常的区别中断与 DMA 的区别中断能否睡眠？下半部能否睡眠？1. 中断处理程序不能睡眠2. 下半部（SoftIRQ、Tasklet、Workqueue） 中断处理注意点1. 快进快出2. 避免阻塞3. 正确返回值4. 如何处理大量任务5. 避免竞态问…...

编程日记 2025/9/6 12:13:20

OpenHarmony子系统开发 - 安全（十二）

OpenHarmony SELinux开发指导（五） 一、OpenHarmony SELinux常见问题 neverallow编译报错处理现象描述编译SELinux时会进行neverallow检查，当配置的策略不合理时，可能出现违反neverallow编译报错。 neverallow check failed…...

编程日记 2025/9/3 0:43:59

深入解析ARM与RISC-V架构的Bring-up核心流程

深入解析ARM与RISC-V架构的Bring-up核心流程作者：嵌入式架构探索者 | 2023年10月引言在嵌入式开发中，处理器的Bring-up（启动初始化）是系统运行的第一道门槛。ARM和RISC-V作为两大主流架构，其Bring-up流程既有共性…...

编程日记 2025/9/6 12:14:15

挺经典的回溯题的。 class Solution { public:vector<vector<int>> result;void recursion(vector<int>& nums,vector<int>& now){if(nums.size()0){result.push_back(now);return ;}for(int i0;i<nums.size();i){now.push_back(nums[i]);…...

编程日记 2025/9/6 12:11:20

vue中如何动态的绑定图片

在项目中遇到需要动态的改变图片路径，图片路径并非是从后台获取过来的数据。因此在data中必须用require加载，否则会当成字符串来处理。...

编程日记 2025/9/6 12:14:14

湖北师范大学计信学院研究生课程《工程伦理》12.6章节练习

1【单选题】下列哪个不是数字身份的特点？ A. 多样性 B. 唯一性 C. 可变性 D. 允许匿名和假名 2【单选题】下列哪项不是现代国家的基本职能。 A. 保护政权统一 B. 保护本国面对其他国家侵犯 C. 保护国内每个人免受他人侵犯 D. 承担发展国民经济 3【单选题】哪个国家在全球率先发…...

编程日记 2025/9/6 12:11:58

prism WPF 登录对话框登录成功后显示主界面

prism WPF 登录对话框登录成功后显示主界面项目结构 LoginUC.xaml <UserControl x:Class"PrismWpfApp.Views.LoginUC"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml…...

编程日记 2025/9/3 13:05:21

MySQL统计信息

1. 什么是统计信息？ 统计信息就像是数据库的"地图"，它告诉优化器： 每个表有多大（有多少行数据） 每个索引的"区分度"（有多少不同的值） 数据分布情况（哪些值出…...

编程日记 2025/9/6 12:11:20

Spark，配置hadoop集群2

编写Hadoop集群启停脚本 1.建立新文件，编写脚本程序在hadoop101中操作，在/root/bin下新建文件：myhadoop，输入如下内容： 2.分发执行权限保存后退出，然后赋予脚本执行权限 [roothadoop101 ~]$ chmod x /r…...

编程日记 2025/9/6 12:09:27

⭐算法OJ⭐重建行程【哈密尔顿路径】（C++ 实现）Reconstruct Itinerary

You are given a list of airline tickets where tickets[i] [from_i, to_i] represent the departure and the arrival airports of one flight. Reconstruct the itinerary in order and return it. All of the tickets belong to a man who departs from “JFK”, thus, t…...

编程日记 2025/9/6 12:14:15

大模型如何优化数字人的实时交互与情感表达

标题:大模型如何优化数字人的实时交互与情感表达内容:1.摘要随着人工智能技术的飞速发展，数字人在多个领域的应用愈发广泛，其实时交互与情感表达能力成为提升用户体验的关键因素。本文旨在探讨大模型如何优化数字人的实时交互与情感表达。通过分析大模…...

编程日记 2025/9/4 14:27:50

【含文档+PPT+源码】基于SpringBoot+Vue旅游管理网站

项目介绍本课程演示的是一款基于SpringBootVue旅游管理网站，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 3.该项目附…...

编程日记 2025/9/6 12:14:13

理解OSPF Stub区域和各类LSA特点

之前学习到OSPF特殊区域和各类类型LSA的分析后，一直很混乱，在网上也难找到详细的解释，在看了 HCNP书本内容后，对这块类容理解更加清晰，本次内容，我们使用实验示例，来对OSPF特殊区域和各类型LSA…...

编程日记 2025/9/5 19:38:59

AI智算-K8s如何利用GPFS分布式并行文件存储加速训练or推理

文章目录 GPFS简介核心特性存储环境介绍存储软件版本客户端存储RoCEGPFS 管理（GUI）1. 创建 CSI 用户2. 检查GUI与k8s通信文件系统配置1. 开启配额2. 启用filesetdf文件系统3. 验证文件系统配置4. 启用自动inode扩展存储集群配置1. 启用对根文件集（root fileset）配额2. igno…...

编程日记 2025/9/6 12:09:04

Linux如何设置bash为默认shell

大部分情况下，Linux的默认shell是bash，但某些Linux发行版，例如Kali，默认的终端是zsh，本文以Kali为例，将Kali的默认shell从zsh改为bash。其实Kali早期的shell也是bash，2020 版本之后&#xff1a…...

编程日记 2025/9/3 9:27:24

leetcode-代码随想录-链表-翻转链表

题目链接：206. 反转链表 - 力扣（LeetCode） 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。输入：head [1,2,3,4,5] 输出：[5,4,3,2,1]class Solution { public:ListNode* rev…...

编程日记 2025/9/6 12:11:22

CSS快速上手

第一章 CSS基础首先来回答2个问题。 1.CSS是什么？ CSS是用来控制网页外观的一门技术。 2.前端最核心的技术是什么？他们分别是用来干吗的？ 前端最核心的技术有：HTML、CSS、JavaScript。 HTML用于控制网页的结构，CSS…...

编程日记 2025/9/6 12:14:14

虚拟现实 UI 设计：打造沉浸式用户体验

VR UI 设计基础与特点虚拟现实技术近年来发展迅猛，其独特的沉浸式体验吸引了众多领域的关注与应用。在 VR 环境中，UI 设计扮演着至关重要的角色，它是用户与虚拟世界交互的桥梁。与传统 UI 设计相比，VR UI 设计具有显著的特点。传…...

编程日记 2025/8/31 13:15:07

搜索与图论树的广度优先遍历图中点的层次

适用性当边的权值相等时，使用广度优先遍历，往往是求图（树）的最短路径最优方法抽象理解伪代码建立队列添加第一个起始点到队列，标记其不可访问 while(队列不为空)//开始循环{获取队列中的队首元素，获…...

编程日记 2025/9/6 12:15:05

DHCP之报文格式

字段说明： op (op code): 表示报文的类型，取值为 1 或 2，含义如下 1:客户端请求报 2:服务器响应报文 Secs (seconds):由客户端填充，表示从客户端开始获得 IP 地址或 IP 地址续借后所使用了的秒数，缺省值为 3600s。 F…...

编程日记 2025/9/2 17:40:18

Docker安装、配置Redis

1.如果没有docker-compose.yml文件的话，先创建docker-compose.yml 配置文件一般长这个样子 version: 3services:redis:image: redis:latestcontainer_name: redisports:- "6379:6379"command: redis-server --requirepass "123456"restart: a…...

编程日记 2025/9/6 8:28:56

空中无人机等动态目标识别2025.4.4

* 一.无人机动态数据概述* 1.1 空中动态数据定义在无人机动态数据的范畴中， 空中动态数据是一个核心概念。它主要包括无人机在飞行过程中产生的各种实时信息，如位置、速度、高度、姿态等[1]。这些数据通过传感器系统采集，并以特定格式存…...

编程日记 2025/9/4 11:14:17

【AI论文】通过R1-Zero类似训练改进视觉空间推理

摘要：人们越来越关注提升多模态大型语言模型（MLLMs）的推理能力。作为在物理领域中运作的人工智能代理的基石，基于视频的视觉空间智能（VSI）成为MLLMs最为关键的推理能力之一。本研究首次深入探讨了通过R1-Ze…...

编程日记 2025/9/6 12:09:27

游戏引擎学习第203天

回顾当前情况在这里我将直播完成整个游戏的制作。我们现在面临一些技术上的困难，确实如此。我的笔记本电脑的电源接口坏了，所以我不得不准备了这台备用笔记本，希望它能够正常工作。我所以希望一切都还好，尽管我不完全确定是否一…...

编程日记 2025/9/1 21:34:28

从菜鸟到高手的提示词优化指南‌

如何用“说话的艺术”榨干AI潜力？ ——从菜鸟到高手的提示词优化指南‌ 一、什么是好的提示词？ 核心公式‌：精准提问明确需求限定条件示范案例好比让AI帮你买咖啡—— ❌ 差提示：“帮我买杯咖啡”（AI可能随便…...

编程日记 2025/9/5 20:29:42

应对高并发的根本挑战：思维转变【大模型总结】

以下是对这篇技术总结的详细解析，以分步说明的形式呈现，帮助理解亿万并发场景下的核心策略与创新思维： 一、应对高并发的根本挑战：思维转变 1. 传统架构的局限问题：传统系统追求零故障和强一致性，但在海…...

编程日记 2025/9/6 12:09:00

【Java集合】单列集合List详解

参考笔记： java 单列集合List 万字详解（通俗易懂）_java singlelist-CSDN博客目录前言： 一、概述二、特点三、使用集合的经典四部曲四、List接口常用的方法五、List接口实现类——ArrayList 六、List接口实现类——Ve…...

编程日记 2025/9/6 12:09:04

蓝桥刷题note13（排序)

1.冒泡排序适用场景： 数据量较小：适用于数据量较小的情况，例如数组长度在 10 以内。优点稳定性：冒泡排序是一种稳定的排序算法，相同元素的相对顺序不会改变。缺点时间复杂度高：平均和最坏时间复杂度为…...

编程日记 2025/9/5 21:48:46

【AI模型核心流程】(一)大语言模型输入处理机制详解与常见误解辨析

一、引言大语言模型（LLM）如GPT、BERT、LLaMA等，已成为自然语言处理领域的核心技术。然而，许多开发者对其底层输入处理机制存在误解，尤其是从自然语言文本到模型可理解的向量表示这一过程。本文将从技术细节出发&…...

编程日记 2025/9/6 12:09:28

如何完整迁移 Git 仓库？

Git 已经成为软件开发中版本控制和协作的事实上的标准。有时，开发人员可能需要将整个 Git 存储库 (包括其历史记录、分支和标记) 移动到新的位置或托管服务。在这个全面的指南中，我们将讨论在不丢失任何关键数据或历史记录的情况下无缝地重新定位完整 Gi…...

编程日记 2025/9/6 0:30:30

《在 Ubuntu 22.04 上安装 CUDA 11.8 和 Anaconda，并配置环境变量》

安装 CUDA 11.8 和 Anaconda 并配置环境变量在本教程中，我们将介绍如何在 Ubuntu 22.04 上安装 CUDA 11.8 和 Anaconda，并配置相应的环境变量。我们还将配置使用阿里云镜像源来加速软件包更新。以下是具体步骤。步骤 1：更新软件源首先…...

编程日记 2025/9/2 7:15:52

残差神经网络（ResNet）概念解析与用法实例：简洁的图像处理任务

目录 1. 前言 2. ResNet的核心思想 2.1 残差学习 2.2 跳跃连接 3. ResNet的架构 3.1 残差块 3.2 ResNet的整体架构 4. ResNet实例：随便处理处理图像 5. 总结 1. 前言随着深度学习的发展，神经网络的层数不断增加，但随之而来的是梯度…...

编程日记 2025/9/1 1:22:29

家里网络访问Github有时候打不开，解决办法

1、修改Hosts文件修改法通过DNS查询工具（如）获取最新GitHub域名解析IP修改系统hosts文件（路径：C:\Windows\System32\drivers\etc\hosts），添加：20.205.243.166 github.com 20.27.177.113 github…...

编程日记 2025/8/27 11:36:17

VirtualBox 配置双网卡（NAT + 桥接）详细步骤

在 VirtualBox 中为 CentOS 虚拟机配置双网卡（NAT 桥接），使其既能访问外网（NAT），又能与宿主机（Windows 10）或局域网通信（桥接）。步骤 1：关闭虚…...

编程日记 2025/9/3 4:33:56

【2023】ORIGIN或MATLAB 颜色图，等高图，颜色条——需要拟合补全中间的颜色

前言不是我疯了，就是世界疯了。我不知道究竟是哪一个疯了。瓶口和瓶盖尺寸不符。也许该怪瓶子，也许该怪盖子。但不管怎样，尺寸不符的事实不容动摇——《1Q84》 \;\;\;\;\;\; 有十几二十个导出的曲线数据，其中第一列是频率点，大约1001个，第二列是某种数据，都在0~1之间…...

编程日记 2025/9/6 8:42:15

flutter 专题七十三Flutter打包未签名的ipa

在Flutter项目开发完成之后，需要把iOS项目拿给第三方（如打包机）进行签名，那我们首先就需要准备打包好未签名的的ipa包。打包之前，需要先从第三方获取到iOS证书(.p12)和描述文件(.mobileprovision)，然后然…...

编程日记 2025/8/31 20:25:18

ngx_get_full_name

定义在 src\core\ngx_file.c ngx_int_t ngx_get_full_name(ngx_pool_t *pool, ngx_str_t *prefix, ngx_str_t *name) {size_t len;u_char *p, *n;ngx_int_t rc;rc ngx_test_full_name(name);if (rc NGX_OK) {return rc;}len prefix->len;#if (NGX_WIN32)if (…...

编程日记 2025/8/27 11:36:08

leetcode-代码随想录-链表-链表总结篇

理论基础链表： 每个节点由两部分组成：数据域和指针域（存放指向下一个节点的指针）；入口节点称为头节点；最后一个节点的指针域指向NULL（空指针）。分类： 单链表双链表&…...

编程日记 2025/9/3 7:10:59

如何用Python轻松实现快速复制或剪切文件列表中的所有文件呢？

在程序开发的过程中，处理文件是我们日常工作中一个很重要的环节。想象一下，当你需要把一大堆文件从一个文件夹移动到另一个文件夹时，手工操作真的会让人觉得烦躁对吧？这时，用代码来处理这些烦恼，真是太方便…...

编程日记 2025/9/4 20:18:48

【棒垒球规则】全国幼儿软式棒垒球比赛规则（二）·棒球1号位

幼儿棒垒球设备 2.01 球棒球棒使用组委会提供的泡棉发泡安全球棒，以安全环保材料制成；球棒规格：长度为 53 厘米，重量为 200 克（10 克），棒头直径为 7 厘米，握把直径为 3 厘米。 2…...

编程日记 2025/8/30 12:37:51

在MacOS 10.15上使用MongoDB

这次是在MacOS 10.15上使用MongoDB。先在豆包问支持MacOS 10.15的MongoDB最新版是什么，答案是MongoDB 5.0。抱着谨慎怀疑的态度去官方网站查询了一下，答案如下 MongoDB 7.x支持的最低版本MacOS是11MongoDB 6.x支持的最低版本MacOS是10.14 又找deepsee…...

编程日记 2025/9/1 11:01:11

【Ragflow】11. 文件解析流程分析/批量解析实现

概述本文继续对ragflow文档解析部分进行分析，并通过脚本的方式实现对文件的批量上传解析。文件解析流程文件解析的请求处理流程大致如下： 1.前端上传文件，通过v1/document/run接口，发起文件解析请求 2.后端api\apps\docum…...

编程日记 2025/9/4 4:17:19

企业供应链管理

企业供应链管理企业供应链管理企业供应链管理企业信息化信息化的作用信息化的发展阶段信息化建设的挑战 SRM（供应商关系管理）SRM架构参考图企业内部系统协作： ERP (企业资源计划)OA (办公自动化)业务功能模块：企业日常办公 EMS …...

编程日记 2025/9/3 12:31:44

性能测试之jmeter的基本使用

简介 Jmeter是Apache的开源项目，基于Java开发，主要用于进行压力测试。优点：开源免费、支持多协议、轻量级、功能强大官网：https://jmeter.apache.org/index.html 安装安装步骤： 下载：进入jmeter的…...

编程日记 2025/9/3 7:53:48

常见的微信个人号二次开发功能

一、常见开发功能 1. 好友管理好友列表维护添加/删除好友修改好友信息（备注、标签等） 分组管理创建/编辑/删除标签好友分类与筛选 2. 消息管理信息发送支持多类型内容：文本、图片、视频、文件、小程序、名片、URL链接等附加功…...

编程日记 2025/9/4 6:33:09

Muduo网络库实现 [十三] - HttpRequest模块

目录设计思路成员设计模块实现设计思路首先我们要先知道HTTP的请求的流程是什么样子的，不然我们会学的很迷糊。对于HTTP请求如何到来以及去往哪里，我们应该很清楚的知道 HTTP请求在服务器系统中的传递流程是一个多层次的过程: 客户端发起请求…...

编程日记 2025/8/29 0:05:52

探索C++11：解锁现代编程（3）

1.包装器 1.1function std::function 是 C 标准库中的一个模板类，位于 <functional> 头文件中。它用于封装可调用对象，包括普通函数、Lambda 表达式、函数对象、成员函数等。std::function 提供了极大的灵活性，使得你可以将不同类型的…...

编程日记 2025/9/5 7:17:13

软件工程（应试版）图形工具总结（二）

遇到的问题，都有解决方案，希望我的博客能为你提供一点帮助。教材参考《软件工程导论（第六版）》七、层次图（H图）与HIPO图 1、概述 1.1、层次图（Hierarchy Chart / H图） 核心…...

编程日记 2025/9/5 19:54:41

人工智能在前端开发中的应用探索

一、人工智能在前端开发中的应用场景人工智能（AI）技术的快速发展为前端开发带来了新的机遇和挑战。AI在前端开发中的应用主要集中在以下几个方面：智能代码生成、自动化测试、个性化推荐、智能交互设计以及性能优化。这些应用场景不仅提高了…...

编程日记 2025/9/5 9:37:26