解决H5调用阿里云OSS上传图片无法实时获取上传结果的一个方法

最新推荐文章于 2024-05-28 13:11:40 发布
最新推荐文章于 2024-05-28 13:11:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： 自我实践 文章标签： 阿里云 通信 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23437317/article/details/69257916
版权

由于公司的H5在调用阿里云OSS上传图片时，FUNCTION是异步的而且无法实时返回结果。

造成的问题就是前段无法获取到图片上否已经上传成功然后进行跳转。

之前的想到的方法是固定时间跳转，这当然只能解决一些常规的问题，对于太大或太小的图片效果都不尽如人意。

后来想到一个方法：

在调用OSS FUNCTION的时候，同时开启一个定时任务每200ms（可自定义）去使用自定义的图片url进行一次HTTP通信，如果通信结果为200，那么就说明

图片已经上传成功，然后就可以进行跳转了，完美解决问题！

qq_23437317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码实现图片上传阿里云OSS
09-20
总结来说，使用JavaScript和`plupload`实现图片上传到阿里云OSS，涉及到的关键技术包括：前端与后端的交互、`plupload`组件的配置与使用、阿里云OSS SDK的调用以及上传事件的监听与处理。这不仅提升了用户体验，还...
阿里云OSS上传文件并返回文件地址
HellocWood的博客
05-18 7754
目录 依赖添加 实体类： OSS配置类: OSSUtil工具类: OSS上传接口类： OSS上传接口实现类： OSS上传控制类： 依赖添加 在Maven的pom.xml文件中添加OSS的依赖： <!--阿里云OSS--> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId>
Android 9.0 上传阿里云 OSS，请求无回调
花花世界的博客
09-02 1791
在 Android 9.0 的手机上，上传文件到阿里云 OSS 上，不论请求是否成功，均没有回调。 而在 9.0 以下的手机中，尝试均没有问题。 错误内容 上传调用方式如下： OSSClient oss = new OSSClient(context, endpoint, credentialProvider, conf); PutObjectResult putResult = oss.putO...
H5、小程序引用OSS图片资源跨越解决
最新发布
weixin_44554055的博客
05-28 349
什么是跨域及CORS配置详见百度，而图片来源位于阿里云OSS，而OSS在之前已经确认跨越配置正常无误，CDN加速并没有启用故此PASS。到此基本可以确定是浏览器缓存引起的。因为第一次访问时浏览器缓存中并没有存在，第一次存在CORS配置，但是浏览器缓存后并不会保留图片的配置，故而第二次去请求时缓存中存在但是并没有CORS配置内容所以引起了。在引用链接地址后面拼接上参数url=url?xxxx,如下所示（建议参数使用时间戳，防止重复）资源路径在线引用报错提示。
【解决bug】oss上传图片后回显失败
weixin_48328037的博客
04-03 2923
bug：（gulimall-oss） 前端页面显示： 找bug： 根据前端的错误信息：判断是发送回显图片的请求 语法错误。 错误在 BucketName上。 <Error> <Code>InvalidBucketName</Code> <Message>The specified bucket is not valid.</Message> <RequestId>6248700B1253C5363150.
利用OSS上传图片失败,图片不能正常回显
weixin_43821851的博客
08-23 1626
解决方案:是因为在VsCode前端代码中field属性名和后端属性名没对应上,导致空指针异常
【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题，OSS文件上传】
qq_45973421的博客
04-10 7233
使用若依框架进行项目开发的时会用到框架自带的代码生成功能，极大方便我们进行项目开发。基于框架开发肯定会有一些功能需要自行优化定制，在设计数据库表代码生成的同时有图片的展示需求，因此在若依框架中发现了图片在列表中回显不显示的问题，接下来我们看看如何解决该问题。提示：以下是本篇文章正文内容，下面案例可供参考每天总结一点经验，都会有量变的结果！
解决阿里云OSS上传文件(如图片)后无法在线预览
taolin0的博客
02-22 6645
解决阿里云OSS上传文件(如图片)后无法在线预览
OSS 上传出现异常
weixin_34204057的博客
10-30 4766
案例一： OSSBrower "no space left on" 分析： 有明显报错信息的先 Google 一下，看看是操作系统错误还是 OSSBrower 抛出，经过鉴定错误是 Linux 系统底层返回，说明当时系统的 OSSBrower 所在的目录磁盘满了，开源的错误到处可以看到，自行解决即可。 案例二： 分片上传成功，下载 404 分析： 如...
上传文件到阿里云OSS-uniapp.zip
09-22
本项目“上传文件到阿里云OSS-uniapp.zip”专注于在uni-app平台上实现对阿里云OSS的文件上传功能，特别适合于微信小程序和H5应用。 uni-app是一个多端开发框架，允许开发者编写一次代码，部署到多个平台，包括微信...
js-sdk/alioss-upload + uniapp阿里云上传oss
05-08
现在我们将深入探讨如何在uniapp项目中结合这两个工具实现阿里云OSS的文件上传。 首先，你需要在阿里云控制台创建一个OSS bucket，这是存储文件的空间。确保bucket的权限设置允许你进行上传操作，并获取到...
解决阿里云OSS使用URL无法访问图片的两种方法
08-18
主要介绍了解决阿里云OSS使用URL无法访问图片的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
阿里云oss上传照片js 、jquery
07-27
阿里云oss上传照片js 、jquery,源代码，下载 阿里云oss上传照片js 、jquery,源代码，下载
H5页面直传阿里云且图片可网页预览
12-10
在这个项目中，我们探讨的是如何通过H5页面直接将图片上传到阿里云OSS，并实现在网页上预览这些上传的图片。 首先，我们需要了解阿里云OSS的API接口和SDK。阿里云提供了多种语言的SDK，包括JavaScript，方便我们在...
SpringBoot+html实现h5录音上传到后台
01-09
6. **文件存储与处理**：接收到文件后，你可能需要将其存储在服务器的某个位置，例如使用SpringBoot集成的文件系统存储或者云存储服务（如阿里云OSS）。此外，可能还需要对音频文件进行一些处理，比如转码、分析或...
解决web项目上传图片不能及时回显的问题
weixin_43869703的博客
05-19 2449
解决web项目上传图片不能及时回显的问题遇到问题解决办法简单实例OSS配置属性（yml文件）OSS配置属性实体类自定义工具类（上传、删除图片）图片上传正常如果你也是相关问题，并通过此方法解决，记得给我点个赞！！！ 遇到问题 在以前接触的web项目凡是涉及到需要上传图片，以及上传图片后需要及时回显的问题时，我的解决办法总是很死板。就是在项目中添加资源的本地映射路径，又因为在IDEA中通过 String path = System.getProperty("user.dir"); 获取项目相对根路径后图片依然不
上传图片到阿里云oss前端页面无法显示图片
weixin_44223786的博客
02-03 1322
只需要在阿里云oss管理控制台，设置bucket权限为公共读写。在做黑马苍穹外卖项目遇到了上传图片后无法回显的问题。
java文件上传到阿里云，但前端界面不显示图片的可能情况
weixin_47195668的博客
12-31 735
java文件上传到阿里云，但前端界面不显示图片的可能情况
【若依框架RuoYi-Vue-Plus 图片回显不显示问题，OSS文件上传或者本地上传】
qq_41685731的博客
08-31 2843
3.ImagePreview组件回显图片，得到的却是OSS回传的oss_id 值，所以在 image-preview 组件不回显图片，需要拿到图片的url地址才是回显图片。在上传图片的过程中，调用了父子组件 $emit 可以使用 @input 来获取调用该方法，可以直接获取到该图片的信息。在上传图片的过程中，调用了父子组件 $emit 可以使用 @input 来获取调用该方法，可以直接获取到该图片的信息。1.设计表 product（商品表） 有 id （id） name（商品名）icon（图标）
vue调用阿里云oss图片上传多张
07-28
在Vue中调用阿里云OSS进行多张图片上传，可以按照以下步骤进行操作： 1. 在你的Vue项目中安装ali-oss和element-ui（可选）依赖： ``` npm install ali-oss element-ui ``` 2. 在你的Vue组件中引入所需的库和样式： ```javascript import OSS from 'ali-oss'; import { Message, Upload } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ``` 3. 创建OSS客户端实例并配置连接参数： ```javascript const client = new OSS({ region: '<your-oss-region>', accessKeyId: '<your-access-key-id>', accessKeySecret: '<your-access-key-secret>', bucket: '<your-bucket-name>' }); ``` 确保替换 `<your-oss-region>`, `<your-access-key-id>`, `<your-access-key-secret>` 和 `<your-bucket-name>` 为你自己的阿里云OSS相关信息。 4. 在模板中使用element-ui的Upload组件来实现图片上传： ```html <template> <div> <el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleFileChange" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传到OSS</el-button> </el-upload> </div> </template> ``` 5. 在Vue组件的methods中实现文件选择和上传的逻辑： ```javascript methods: { handleFileChange(fileList) { this.fileList = fileList; }, handleUpload() { this.fileList.forEach(file => { const fileName = file.name; client.put(fileName, file) .then(() => { Message.success(`${fileName} 上传成功`); }) .catch(error => { Message.error(`${fileName} 上传失败：${error}`); }); }); } } ``` 以上代码中的`fileList`是一个存放选择的文件列表的数组，可以在data中定义并初始化为空数组。 通过以上步骤，你就可以在Vue中调用阿里云OSS进行多张图片上传了。请确保你的阿里云OSS配置正确，并根据具体需求进行适当的定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值