记一次前端直接上传图片到oss报错

最新推荐文章于 2025-01-13 13:50:35 发布
最新推荐文章于 2025-01-13 13:50:35 发布
阅读量1.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/supming1/article/details/132236034
本文讲述了前端在将图片直接上传到阿里云OSS时遇到的net::ERR_NAME_NOT_RESOLVED错误，通过与阿里云技术支持交流，发现问题是由于后端返回的region参数配置错误导致的域名拼接问题。作者还提到使用STS临时访问凭证访问OSS的过程和可能的其他错误排查资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端直接上传图片到阿里云oss,相关过程官网和网上资料已经很详细，不做赘述。

但这个过程比较复杂，前后端对接过程中很容易出现报错，这里遇到了以下报错，不容易排查。

请求显示net::ERR_NAME_NOT_RESOLVED错误，catch输出如下：

 咨询了阿里云oss的技术支持

让我们ping了请求域名，发现ping不通，说明还没请求到阿里云节点。但前后端都没有配置域名，后猜测是ali-oss根据参数拼接的的域名

 对比技术支持给我们的能ping得通的域名和发起请求的域名，发现后端返回的region有问题。开头少了oss-,补上后就可以了。

其他错误可查看，有相关解析，比较好排查。

使用STS临时访问凭证访问OSS_对象存储-阿里云帮助中心

supming1
关注
uniapp(全端兼容) - 详解前端阿里云OSS上传图片并添加水印功能，纯前端直传图片到阿里oss对象存储另外添加自定义水印，uniApp上传图像文件到OSS时给图片插入水印添加水印（无需后端服务）
高级前端工程师
11-01 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，阿里云oss对象存储，前端直传无需后端接口服务器，上传图片到阿里云oss，给图片添加水印后再传到oss上，文字水印，图片水印，uni-app实现阿里OSS直传，uniapp阿里云oss图片直接上传(不需要后端做签名)，uni-app上传图片到oss并在底部加入文字水印，uni-app上传图片并添加水印支持拍照单图片上传多图片上传并添加水印，uniapp选取相册中的照片并插入水印上传，各平台打开相机和相
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
资深程序员
06-27 7274
微信小程序，vue2，vue3，阿里云oss，上传图片wordexceloffice音频视频图像头像.doc.xlsx.ppt文件到阿里云oss，上传文件到oss教程，不经过后端纯前端上传文件到阿里云OSS，纯前端上传文件到oss，详细的微信小程序前端上传阿里云oss教程，前端直传至阿里OSS对象存储小白详细的教程，怎么不通过后端接口直接上传到阿里云oss服务器上，直接上传文件到阿里云OSS，wx.chooseImage拍照选取图片怎么上传到阿里云oss，二进制文件流如何上传到阿里云oss
OSS图片上传工具
04-17
OSS图片上传工具,用于oss上传图片测试用，
阿里云oss上传图片
zm_miner的博客
05-16 777
安装依赖 npm install --save axios js-base64 点击修改按钮 弹框选择图片或者文件 代码 index.js <AliyunOSSUpload onGetFileUrl={onGetFileUrl} /> AliyunOSSUpload.js import React from 'react'; import { Form, Upload, message, Button } from 'antd'; import { getOSSClientCredit,
上传文件到oss服务端出现上传失败情况
a99101的博客
02-10 3309
今天在上传文件时候发现上传失败，看了一下文件名发现存在5899 6666中间两个空格情况，本以为是空格导致拼接的url地址出错导致的，后来调试一上午发现都没关系。后来才知道是特殊符号导致。在oss上根据路径查到该文件后, 发现文件的路径是正确的, 但如果该路径中出现了例如#, 这样的特殊字符的时候, oss会自动帮我们encoder一下, 导致下载的url会变。后来发现# %也会 我索性就直接将特殊符号在文件名上传时候进行替换了。
阿里云OSS使用前端JavaScript上传出现错误
u011563431的博客
12-08 372
OSS是阿里云的云储存产品，支持直接通过Web页面或者是专用的管理工具进行管理操作。也可以使用代码进行图片的管理和上传，一般采用的是后台的方式上传，在一些内部的管理系统内，也可以使用JavaScript直接在前端进行图片文件的上传。
为什么我的“OSS”上传图片会失败？
主力语言:Golang + Java
01-13 522
这篇文章出自我毕业后的一个半月，自己也很快地从学生思维转变到了打工人思维模式上，未来之路还很长，自己要学的东西也还很多，希望自己能保持着对技术的热情走远些吧！
alioss文件上传不成功
qq_58161463的博客
12-18 702
再设置属性腰先getID，再getSecret，不然就无法解析，无法上传，下图就可以了。
Vue3 - 超详细“纯前端“将文件上传到阿里云OSS对象存储，最新阿里云前端直传音频、视频、图片、文件、office文档等任意文件，vue3单个或批量从本地选择文件，秒传到阿里云oss无需后端接口！
资深程序员
12-16 6549
vue3，阿里云oss存储，前端直传oss，上传图片/office文档/音视频/zip压缩包到阿里云oss，项目中上传文件到阿里云oss详细教程，如何将本地文件上传到阿里云OSS存储，纯前端实现阿里云OSS上传，纯前端直传至阿里OSS对象存储教程，如何解决上传文件到阿里云OSS本地环境调试出现跨域问题，直传阿里云oss跨域报错解决，前端直接上传文件到oss服务端，不经过后端直传，浏览器直接上传文件，阿里云oss上传sdk官方文档，阿里云错误，解决这个问题，上传很慢，一直签名失败，权限，不经过后端，纯前端直传
uniapp [全端兼容] - 详细实现“纯前端“直传阿里云OSS功能，将各种文件pdf/doc/xls/ppt/txt/图片/音频/视频从本地快速秒传传到阿里云oss，全平台前端直传无需后端服务器！
热门推荐
资深程序员
06-29 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，阿里云oss，小程序阿里云oss上传文件，直接将文件上传到阿里云OSS，不经过后端，纯前端直传，不用后端可以直接在前端上传吗，阿里云oss上传，配置教程，阿里云oss配置，摄像头拍照或相册选取上传到阿里云，前端阿里云oss上传文件，office文档文件word文档/excel电子表格/ppt演示文稿、pdf文档/doc/ppt/xls/txt/mp3/mp4，上传文件图片视频等资源到OSS，上传报错，
上传文件或者图片到OSS
12-21
使用的控制台，根据文件或者图片的Base64字符串将相对应的文件或者图片上传到到OSS
OSS批量上传图片
03-03
OSS远程上传附件文件，单个多个，可以对文件删除
js代码实现图片上传阿里云OSS
11-29
基于plupload封装 支持html5,flash,silverlight,html4 等协议上传 可以运行在PC浏览器，手机浏览器，微信 可以选择多文件上传 显示上传进度条
前端vue通过oss直接上传文件到阿里云
ddsuuny的博客
03-01 1316
通过后端获取oss需要的参数 注意：oss时要加上headers，否则vue会报错 原码：uploadByOss.vue <template> <div> <el-upload ref="uploadMutiple" action="" :show-file-list="false" :multiple="true" :limit="limit" :before-uplo...
OSS 上传图片
LYR 的博客
02-15 442
final OSS oss; final AliOssProperties ossProperties; @RequestMapping("/file") public R uploadFile(@RequestPart MultipartFile file) throws IOException { String newFileName = AliyunOssUtil.getNewFileName(ExtUtil.fileExtName(file.getOrigi.
oss上传图片
dakache11的博客
11-25 201
https://blog.youkuaiyun.com/Idiot_2018/article/details/82490807   https://blog.youkuaiyun.com/AloneAsFoam/article/details/77880475 这两篇文章已经可以完成，用签名直接上传到oss上的功能，后续有时间再补充   祝工作顺利，身体健康...
oss图片上传
rolinabc的博客
08-02 7952
1.背景 最近处理了一个需求，将图片的上传方式由原来的公有上传，改为oss私有上传方式。刚开始听到的时候有点懵，什么是私有上传，oss又是什么。所以这篇文章就当作是给大家科普啦～ 2.什么是对象存储oss 比较官方的解释是：对象存储OSS是在云上提供无层次结构的分布式存储产品，为用户提供单价较低且快速可靠的数据存储方案。用户可通过云服务器实例或互联网使用 Web API 接口存储和检索数据。在 OSS 上的数据，用户使用指定域名的 URL 地址，通过 HTTP/HTTPS 协议存储和检索每个独立的数.
使用OSS上传图片
lj_heaven的博客
08-12 741
Java整合oss图片上传的基本实现
使用阿里OSS上传图片
baiwangyou的博客
05-18 325
第三个（access-key-id）和第四个（access-key-secret）属性。第一个属性:bucket-name。第二个属性：endpoint。3：获取上述四个属性字段。这样就将图片存储到云端了。
ueditor图片上传报错
最新发布
01-24
### UEditor 图片上传常见报错及解决方案 #### 一、未找到上传数据 当使用UEditor进行图片上传时，如果遇到提示“未找到上传数据”的错误，通常是因为请求被拦截所致。对于基于SSH框架的项目来说，这种现象较为普遍。确保服务器端能够正常接收到前端发送过来的数据包至关重要[^1]。 ```java // 假设这是Java环境下处理文件上传的部分代码片段 @RequestMapping(value="/upload", method=RequestMethod.POST) public String handleFileUpload(@RequestParam("file") MultipartFile file){ if(!file.isEmpty()){ try { byte[] bytes = file.getBytes(); Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename()); Files.write(path, bytes); return "You successfully uploaded '" + file.getOriginalFilename() + "'"; } catch (IOException e) { return "Failed to upload '" + file.getOriginalFilename() + "' => " + e.getMessage(); } }else{ return "Failed to upload empty file"; } } ``` #### 二、不兼容特定浏览器（如微信） 针对某些特殊浏览器环境下的兼容性问题，比如在微信内置浏览器中可能出现的问题，在`Ueditor.all.js`指定位置处存在可能导致异常执行路径的逻辑判断语句。简单地对该部分代码加以适当调整或注释掉不必要的验证条件往往可以有效缓解此类状况的发生[^2]。 #### 三、自定义存储方式支持 考虑到实际应用场景的需求多样性，默认情况下仅限于本地磁盘保存的方式显然不够灵活。为了实现更广泛的功能扩展，例如对接第三方对象存储服务（像阿里云OSS），则需修改原有固定模式的服务端接收程序逻辑，允许开发者自由设定目标地址来完成资源持久化操作[^3]。 #### 四、非开发环境中使用的注意事项 对于生产部署而言，可能会触发额外的安全机制或者其他配置项影响正常使用体验。以Vue集成为例，通过定制化的组件封装形式绕过了默认行为限制的同时也提供了更加便捷高效的交互界面设计思路；同时注意检查网络状态以及跨域资源共享策略设置是否合理[^4]。 #### 五、后台调试信息干扰 最后值得注意的是，在一些PHP框架内（例如ThinkPHP），全局性的开关选项也可能间接造成意想不到的结果。具体表现为即使按照官方文档指引完成了相应参数调整之后仍然无法顺利提交表单内容至远程服务器。此时应仔细排查是否存在多余的响应头信息混入最终输出流当中，并及时关闭不必要的跟踪功能以便恢复正常运作流程[^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值