阿里云OSS前端直传踩坑

其他方法不多说。主要简介服务端签名后直传

这里下载的前端demo是js写的，Vue的代码可以参考

Vue的代码

下边这个图，狗日的鬼，我是没看懂。试出来的，这个表达不清晰，调接口就调接口嘛，写的是个球。

serverUrl = ‘http://88.88.88.88:8888’
这个东西就是，前端调用后端时，后端返回给前端签名授权的，那个接口

比如我这里的

就要写成

下边是调签名返回的参数

这里的坑：path最前边不能加 /

加了这个 ‘/’就会报错

请求oss的路径需要拼接

下边贴一下前端js代码修改的地方.如果测试请先下载完整的前端代码，再补充

function send_request()
{var xmlhttp = null;if (xmlhttp!=null){// serverUrl是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。serverUrl = 'http://localhost:8031/api/oss/ossSign/policy/csd.png'//这里请求方法改为了post，有参数为 csd.png------如果是get方法，无参数直接调用就可以了。xmlhttp.open( "POST", serverUrl, false );xmlhttp.setRequestHeader('Wanplus-Access-Token',"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxMTExIiwiZXhwIjoxNjQ5ODMwOTM3LCJpYXQiOjE2NDk4MTI5Mzd9.uCl3-jVVTZ6Dg8-NxD1YNhZaf-pgyT2FqfEwzI85LfLjKDHGQruTd9QMOJ_2PLjpPUT-e8SA7Sc_P1srP_PRYw");xmlhttp.send( null );return xmlhttp.responseText}else{alert("Your browser does not support XMLHTTP.");}
};function set_upload_param(up, filename, ret)
{new_multipart_params = {'key':'flex/csd.png',
'policy':'需要有值','OSSAccessKeyId': '需要有值', 'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': '需要有值',};up.setOption({'url': '这里是拼接的请求路径','multipart_params': new_multipart_params});up.start();
}var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles', //multi_selection: false,container: document.getElementById('container'),flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',//url:  https://oss-cn-csd.aliyuncs.comurl : '这里用 endpoint',});uploader.init();

阿里云OSS前端直传踩坑相关推荐

阿里云oss上传踩坑
xhr.withCredentials = true,默认为true,不要脑残改为false: 不要设置这样一个请求头,xhr.setRequestHeader('Content-Type', 'mu ...
从AWS S3换成阿里云OSS存储所踩的坑
因业务需要,AWS S3 不能使用了,要换成阿里云OSS存储和下载.简单作以记录,以作备忘. 1.参照https://help.aliyun.com/product/31815.html?spm=51 ...
Android集成阿里云旺即时通讯踩坑历程
下载云旺的demo,将demo中的OneSDK直接拷贝,作为Moudle进行依赖,具体操作就不说了,OneSDK是最新的,一定不要进行修改, 进行依赖后,可能会遇到buildToolsVersion ...
阿里云服务器java项目踩坑日记
坑一: 在linux中使用的环境一定要是linux版本的,不要图方便导入windows上的jdk 活生生的教训例子: 今天配置了两个小时的阿里云服务器,第一步配置jdk,一直-bash: java: ...
php阿里云oss文件上传
php的文件上传文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档单文 ...
阿里云OSS上传请求403问题的完美解决方案及uni.uploadFile h5上传文件失败完美解决方案
在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS. ajax跨域上传首先会发送o ...
前端阿里云OSS直传，微信小程序版本
前言: 网络上许多的文章资料,全是使用阿里云官方的SDK,ali-oss插件去做直传.可是各位素未谋面的朋友要注意,这个SDK它支持web环境使用,也就是PC端浏览器. 当项目环境切换到微信小程序,是 ...
阿里云OSS服务端签名前端JS直传（php）示例
阿里云OSS服务端签名后前端JS直传(php)示例需求:服务端上传图片太慢,需要使用前端直传的方式.但前端把阿里云的 AccessKey ID 和 AccessKey Secret 放在前端文件中会 ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
【对象存储】关于阿里云OSS踩坑记录
前言:最近笔者通过PHP做了一个上传文件到阿里云OSS存储的程序,在上传过程中官方文档写的很清楚,几乎没有遇到什么问题,但在访问文件的过程中,遇到了问题,由于笔者的bucket是私有域,所以访问时,首 ...

阿里云OSS前端直传踩坑

阿里云OSS前端直传踩坑相关推荐

最新文章

热门文章