uni.uploadFile 使用POST 上传到亚马逊 AMS s3 上

关于使用uniapp 使用uni.uploadFile 使用POST 上传到亚马逊 s3 上
第一点 是需要配置Policy的策略
这边是我传入的一个参数
然后把obj转成一个json的字符串 用base64.encode转成base64
我这个eres.credentials.expiration是取后端的 后端返回的是2022-12-15T08:21:47+00:00
acl不加是因为他报了一个Accessdenied 的问题
success_action_redirect 不加是因为他报了一个304 The bucket you are attempting to access must be addressed using the 。。。。

第二点 signature
文档提供是这样
注意 这边顺序有问题 按他这样顺序传入 亚马逊服务器那边会一直报签名不符合

按到我这样传入就可以了 主要还是把顺序换一下
最后一步的Hex这个里面的顺序也要互换
这边是CryptoJS 用require 引入一下 var CryptoJS =require(‘…/…/…/util/CryptoJS.js’); 当然也可以网上找 用npm包也可以

var CryptoJS=CryptoJS||function(h,i){
   var e={
   },f=e.lib={
   },l=f.Base=function(){
   function a(){
   }return{
   extend:function(j){
   a.prototype=this;var d=new a;j&&d.mixIn(j);d.$super=this;return d},create:function(){
   var a=this.extend();a.init.apply(a,arguments);return a},init:function(){
   },mixIn:function(a){
   for(var d in a)a.hasOwnProperty(d)&&(this[d]=a[d]);a.hasOwnProperty("toString")&&(this.toString=a.toString)},clone:function(){
   return this.$super.extend(this)}}}(),k=f.WordArray=l.extend({
   init:function(a,j){
   a=
this.words=a||[];this.sigBytes=j!=i?j:4*a.length},toString:function(a){
   return(a||m).stringify(this)},concat:function(a){
   var j=this.words,d=a.words,c=this.sigBytes,a=a.sigBytes;this.clamp();if(c%4)for(var b=0;b<a;b++)j[c+b>>>2]|=(d[b>>>2]>>>24-8*(b%4)&255)<<24-8*((c+b)%4);else if(65535<d.length)for(b=0;b<a;b+=4)j[c+b>>>2]=d[b>>>2];else j.push.apply(j,d);this.sigBytes+=a;return this},clamp:function(){
   var a=this.words,b=this.sigBytes;a[b>>>2]&=4294967295<<32-8*(b%4);a.length=h.ceil(b/4)},clone:function(){
   var a=
l.clone.call(this);a.words=this.words.slice(0);return a},random:function(a){
   for(var b=[],d=0;d<a;d+=4)b.push(4294967296*h.random()|0);return k.create(b,a)}}),o=e.enc={
   },m=o.Hex={
   stringify:function(a){
   for(var b=a.words,a=a.sigBytes,d=[],c=0;c<a;c++){
   var e=b[c>>>2]>>>24-8*(c%4)&255;d.push((e>>>4).toString(16));d.push((e&15).toString(16))}return d.join("")},parse:function(a){
   for(var b=a.length,d=[],c=0;c<b;c+=2)d[c>>>3]|=parseInt(a.substr(c,2),16)<<24-4*(c%8);return k.create(d,b/2)}},q=o.Latin1={
   stringify:function(a){
   for(var b=
a.words,a=a.sigBytes,d=[],c=0;c<a;c++)d.
使用 Vue 或 UniApp 开发应用时,可以利用 uni-app 的 API uni.chooseImage 和 uni.uploadFile 来实现图片的上传和更换。下面是具体的实现步骤和代码示例: 1. 使用 uni.chooseImage 选择图片: 该方法可以弹出图片选择器,用户可以选择本地相册中的图片,或者使用相机拍摄新图片。选择图片后,会返回图片的本地文件路径。 ```javascript uni.chooseImage({ count: 1, // 默认选择1张图片 sizeType: ['compressed'], // 可以指定选择大图还是小图 sourceType: ['album', 'camera'], // 可以选择相册或相机 success: (res) => { // 处理用户选择的图片 const tempFilePaths = res.tempFilePaths; // 将图片路径保存,以便上传 this.selectedImage = tempFilePaths[0]; }, fail: (err) => { // 处理错误情况 console.error(err); } }); ``` 2. 使用 uni.uploadFile 上传图片: 得到图片的本地文件路径后,使用 uni.uploadFile 方法将图片上传到服务器。该方法会返回一个上传任务 ID,可以通过这个 ID 监听上传进度和上传成功后的状态。 ```javascript uni.uploadFile({ url: '服务器上传接口', // 上传图片到服务器的接口地址 filePath: this.selectedImage, // 本地图片路径 name: 'file', // 上传时的文件名 success: (uploadRes) => { // 上传成功的回调函数 const data = JSON.parse(uploadRes.data); // 处理返回的数据,比如更新UI显示上传成功的图片等 console.log('上传结果', data); }, fail: (err) => { // 上传失败的回调函数 console.error('上传失败', err); } }); ``` 请注意,上传图片到服务器通常需要处理跨域问题,确保服务器端设置允许来自客户端的请求。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值