uniapp使用阿里OSS上传

uniapp通过Sts上传文件到阿里云OSS兼踩坑记录(APP端) 1.先说说需求 由于本人的服务器较为辣鸡,前端上传到服务器后再上传到Oss比较难受,因此采用前端直传,但是呢,为了安全我采取了阿里云的STS策略,详情请移步到:https://help.aliyun.com/document_detail/100624.html?spm=5176.12818093.0.dexternal.312f16d0q3Ox9r 一切想得很美好,好了,开始踩坑 2.踩坑开始 本人后端采用的是JAVA。总体来说后端的坑比较少 第一次踩坑(我觉得不太行): 刚开始满怀欣喜看得阿里云的的js 阅读详情

此上传方法并不困难,纯纪录用

1.配置Bucket跨域访问(js上传都需要配置)
  1. 登录OSS管理控制台。
  2. 单击设置。
  3. 单击创建规则,配置如下图所示。
  4. 在这里插入图片描述

如是小程序,则需要配置小程序的上传域名白名单,具体可以看这篇文章《小程序配置域名白名单》

2.使用Web端直传实践方案Demo进行上传测试
  • 下载应用服务器代码
  • 将文件解压,并打开upload.js文件
  • 修改upload.js中的配置信息。
    修改配置信息
  • accessId : 设置你的AccessKeyId。
  • accessKey : 设置你的AessKeySecret。
  • host: 格式为bucketname.endpoint,例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍,请参见Endpoint访问域名。
  • expiration:设置Policy的失效时间,如果超过失效时间,就无法通过此Policy上传文件。
3.进行上传测试
  1. 在浏览器打开index.html文件
    index.html
  2. 单击选择文件,选择指定类型的文件,单击开始上传。
4.获取上传需要的签名(signature)和加密策略(policy)。

按F12开启web调试,在请求中的Form Data中获取signature和policy。
获取signature和policy

5.使用uniapp上传图片

使用chooseImageApi选择本地图片后上传

uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'],
				sourceType: ['album'],
				success: res => {
					let tiemr = new Date();
					let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr.getDate();
					address = 'zskp/userHead/' + address + '/';
					var imageSrc = res.tempFilePaths[0];
					let str = res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.'));
					let nameStr = address + tiemr.getTime() + str;
					let ossUrl = 'http://xxx.xxxxxxxxxxxxxxxxxxxxxx.xxx/';
					uni.uploadFile({
						url: ossUrl,//输入你的bucketname.endpoint
						filePath: imageSrc,
						fileType: 'image',
						name: 'file',
						formData: {
							name: nameStr,
							key: nameStr,
							policy: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你获取的的policy
							OSSAccessKeyId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你的AccessKeyId
							success_action_status: '200', // 让服务端返回200,不然,默认会返回204
							signature: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' // 输入你获取的的signature
						},
						success: res => {
							if(res.statusCode == '200'){
								consonle.log(ossUrl + nameStr);
							}else{
								consonle.log(res);
							}
						}
					});
				}
			});

上传成功的状态码为200时,则上传成功,如果未成功,请检查对应bucket是否设置跨域,已及AccessKeyId和签名(signature)和加密策略(policy)是否填写正确。

END

阿里云对象存储OSS前端直传,(配合uView组件使用) uni.uploadFile为uniapp的api而formData该参数可以请求额外的form data。那么我们应该传哪些额外的参数呢?可以查看阿里云对象存储的相关文档。看看哪些是必传的,哪些是非必传的。然后将参数传过去就可以了。根据uniapp官网。 阅读详情

相关推荐

uniapp微信小程序开发基于ali-oss直传文件上传解决方案

进入ali-oss开发者平台

cabinx的博客 2026

uniapp使用阿里云OSS直接上传文件

背景 由于服务器带宽优先,很多时候上传文件,尤其是视频文件,稍微大一点上传速度有很慢,加上一些安全方面的原因,我还是喜欢将文件直接上传到阿里云OSS上,但是在uniapp中配置上传相对有点繁琐,这里记录一下,也方便大家直接拷贝使用。 流程 1.阿里云后台获取相关key 这里用需要三个数据 分别是: 1.accessid: 2.accesskey: 3.Bucket域名: 前两个大家都知道,最后一个由于阿里云后台都写在一起,比较容易搞混,这里截图给大家参考下 2.小程序端配置js文件 小程序主要配置4个文件

latinhui的博客 1万+

uniapp [全端兼容] - 详细实现“纯前端“直传阿里云OSS功能,将各种文件pdf/doc/xls/ppt/txt/图片/音频/视频从本地快速秒传传到阿里云oss,全平台前端直传无需后端服务器!

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,上传报错,

🏆 前端领域优质创作者 1万+

在uniapp小程序中使用阿里云OSS上传图片(有部分视频教程)

1. 前言 这是本人毕业设计中其中一个功能点,就是用户在微信小程序(使用uniapp框架)中的社区模块中可以发布个人动态,其中动态可包含图片,那么我们发布的图片在实际开发中不会直接放到项目中吧,因为那样会是整个项目体积变大,所以我想利用阿里云的OSS把发布成功的图片自动上传到它那里,同时数据库会存放上传成功的图片路径,然后在前端中调用后端接口显示出来。 2. 实现效果(最后放个演示视频吧) 3. 实现思路 ...

NSX-Truth 1万+

uniapp(全端兼容) - 详解前端阿里云OSS上传图片并添加水印功能,纯前端直传图片到阿里oss对象存储另外添加自定义水印,uniApp上传图像文件到OSS时给图片插入水印添加水印(无需后端服务)

uni-app,h5移动端网页,微信小程序,支付宝小程序,Android安卓,苹果ios,app,nvue,阿里云oss对象存储,前端直传无需后端接口服务器,上传图片到阿里云oss,给图片添加水印后再传到oss上,文字水印,图片水印,uni-app实现阿里OSS直传,uniapp阿里云oss图片直接上传(不需要后端做签名),uni-app上传图片到oss并在底部加入文字水印,uni-app上传图片并添加水印支持拍照单图片上传多图片上传并添加水印,uniapp选取相册中的照片并插入水印上传,各平台打开相机和相

✅ 精选推荐文章 1万+

Latex | IEEE双栏排版中长公式的排版

IEEE双栏排版中,有时候公式过于长了,过宽,导致单栏排版不下。

qq_43466146的博客 1万+

uniapp使用阿里云OSS上传文件

本文使用的方式是直接上传,不需要向后端获取凭据。优点是上传方便,缺点是本地存储Key较为不安全。

flymyd的博客 2691

Cursor 使用教程(2025年更新版)

官方Cursor详细使用教程在“扩展学习”

我是赛博AI Lewis 7082

uniapp使用阿里oss上传

//方法 npm i ali-oss --save <script> const OSS = require("ali-oss") created() { this.client = new OSS({ endpoint: '', region: "", accessKeyId: "", accessKeySecret: "", bucket: "", timeout: 360000 }) }, upLoad() { let that = th

weixin_42752532的博客 1265

将机器人urdf模型转换为Mujoco环境下的mjcf模型

在使用gym环境进行人形模型站立训练的过程中,我想要将之前ros环境下的机器人urdf模型导入到mujoco环境下,这时候就需要将urdf模型转换为mujoco专用的mjcf模型。-AzureLoong.urdf是机器人模型(我这里使用青龙的模型);--custom_robot.xml是转换完成之后的机器人模型的名字和格式;包要求 Python 版本必须是 3.11 或更高),保证自己的其他训练环境和依赖不被干扰。首先将meshes文件迁移到需要输出的目录下,然后再运行转换命令。最后就可以成功输出了。

weixin_44334573的博客 3754

逆向实战:360加固DEX解密全流程解析(附Frida脚本与SoFixer修复技巧)

本文深入解析360加固DEX解密的全流程,涵盖动态Hook技术、Frida脚本应用及SoFixer修复技巧。通过实战案例详细展示如何识别加固特征、定位关键函数、实现ELF文件修复,并解析RC4和zlib解密算法,为逆向工程师提供全面的技术指导。

weixin_29323551的博客 608

在Uniapp中使用阿里云OSS插件实现文件上传

本文介绍了如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。通过引入阿里云OSS插件,配置初始化参数,并结合uni.chooseVideo选择或拍摄视频文件,最终将文件上传至阿里云OSS。文章详细讲解了插件的初始化、文件上传的实现步骤,以及如何监听上传状态。通过本文,开发者可以快速掌握在Uniapp小程序中集成阿里云OSS的方法,轻松实现高效的文件上传功能。

weixin_44590591的博客 1925

ROS开发者的福音:用Anaconda虚拟环境解决Python包冲突(附完整配置流程)

本文为ROS开发者提供了使用Anaconda虚拟环境解决Python包冲突的完整方案。通过分析冲突根源,详细介绍了Miniconda安装、专用环境创建以及核心桥梁包的配置流程,并阐述了“混合环境运行”与“纯虚拟环境构建”两种实战工作流,帮助开发者实现ROS核心与特定Python库的和谐共存,从而提升开发效率和项目可维护性。

weixin_28835789的博客 338

uni-app 使用阿里oss上传图片

其他相关JS文件在底部 import Crypto from './crypto.js'; import './hmac.js'; import './sha1.js'; import { Base64 } from './base64.js'; const uploadFileSize = 1024 * 1024 * 100; // 上传文件的大小限制100m const accesskey = "key" const accessId = "id" const ossDomain = 'http:.

xiaodouxuan11的博客 1025

让 AI 自己“画施工图”——基于扩散模型的智能 CAD 管线生成

AI驱动CAD管线设计革命:Layout2CAD实现30秒自动化出图 针对设计院70%时间耗费在管线绘制的问题,研究团队基于Stable Diffusion开发了Layout2CAD系统,实现建筑草图到DWG施工图的智能转换。该系统采用三阶段流程:语义分割建筑底图→扩散生成多通道Heatmap(含管径/标高信息)→矢量化输出DWG实体,结合129M参数的多模块模型(Diffusion UNet+GraphRefiner)及规范判别器,确保1mm精度并自动满足GB50015-2019标准。

qq_74383080的博客 2014

基于 MATLAB 的精馏塔模拟仿真

基于 MATLAB 的精馏塔模拟仿真精馏塔是一种重要的化工设备,其中乙烯精馏塔和醋酸乙烯精馏塔是常见的两种精馏塔。本文基于 MATLAB 软件,给出了针对这两种精馏塔的模拟仿真代码。

与其临渊羡鱼,不如退而结网 903

【uniapp】阿里云OSS上传 [视频上传]

引用uniapp插件市场的插件,使用的是视频上传 (阿里云 oss上传) 我只使用了H5和App端,需要后端配置跨域 yk-authpup详情请参考 》》【用户告知权限申请的目的】 【插件市场】阿里云存储OSS前端直接上传(全端通用) - 前端JASON <template> <view> <view class="bg pd-20-30"> <view class=""> <view class="mg-tb-25 fbc">上

Minions_Fatman的博客 1941

PCL 点云八叉树射线相交

PCL 点云八叉树射线相交

dayuhaitang1的博客 850

uniapp OSS直传

uniapp OSS直传

2003

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

uniapp上传阿里云oss (也有解决报错403的问题)

uniapp上传阿里云oss

weixin_41623830的博客 2241

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

uniapp 阿里云 oss 上传文件/图片

项目背景: uniapp 开发的 混合项目,包含 H5, ios, android 三段开发; 大体流程: 向自己的服务器 请求操作 阿里云OSS token 权限 将文件上传至 阿里云OSS ,这里有个小插曲 ,分了两只情况:等下在后面具体分析两种情况 1,使用 uniapp 的 uni.chooseImage 选择图片/或者拍照,拿到的文件 2,是用 H5 input 方式拿到的 图片信息 将那上传成功的 文件信息 通知到 自己的服务器, uniapp 通过 ...

唐僧的专栏 2727

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

uniapp上传图片和视频到OSS

1.首先需要拿到formData里面的参数如下所示: formData: { name: nameStr, key: nameStr, policy: 'xxxxxxxxx', // 输入你获取的的policy OSSAccessKeyId: 'xxxxxxxxxxxx', // 输入你的AccessKeyId success_action_status: '200', // 让服务端返回200,不然,默认会返回204 signature: 'xxxxxxxxxxx...

梨子社区 2574

vue 上传图片到oss / uniapp上传图片到oss

vue 新建js文件 let OSS = require('ali-oss'); //npm 下载ali-oss let client = new OSS({ /*需要自己去申请*/ accessKeyId: '', accessKeySecret: '', bucket: '', region: '', }); export async function put (obj) { // 'tu/'=>在oss上的保存图片的文件夹(自定义一个文件夹名) le

Dreamy smile 971

uniapp 阿里云oss图片上传封装多平台适用

uniapp开发兼容多平台操作,阿里云oss图片上传返回下载url功能

颜良文丑的博客 709

uniapp ali-oss 体积过大无法使用

uniapp app 上传图片ali-oss 体积过大

qq_49073580的博客 4286

uniapp中OSS直传阿里云(h5)

OSS直传阿里云 在移动端uniapp项目中遇到了要是用OSS直传阿里云服务器,经过各种踩坑,最终想总结点东西,希望有用 1、安装依赖 npm i ali-oss --save 2、在上传页面中引入 const OSS = require(‘ali-oss’); 3、实例化OSS 实例化oss时要么用后台返回的数据,要么自己在自己所用的阿里云服务器寻找,此处能查的比较多,不多说了 let client = new OSS({ region: 'xxxxbeijing.aliyuncs.com/', //

moanuan的博客 5631
上一篇: uniapp唤起谷歌地图APP
下一篇: 微信公众号——网页授权
時が止まる
博客等级 码龄8年 38粉丝 12原创
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值