阿里云OSS前端直传踩坑

最新推荐文章于 2024-08-26 09:17:12 发布

试着生存

最新推荐文章于 2024-08-26 09:17:12 发布

阅读量2.1k

点赞数 3

分类专栏： OSS 文章标签： java

本文链接：https://blog.csdn.net/weixin_44050355/article/details/124149752

版权

OSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档介绍了如何在前端通过调用后端接口获取签名授权，实现阿里云OSS对象存储的文件直传。涉及到的关键步骤包括：设置服务器URL，注意path前不应加'/'，调整请求方法为POST，并设置必要的multipart_params。示例代码使用了Vue和plupload库，详细展示了关键代码段，帮助开发者理解并实现这一流程。

摘要由CSDN通过智能技术生成

其他方法不多说。主要简介服务端签名后直传
在这里插入图片描述

这里下载的前端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.com
    url : '这里用 endpoint',

});

uploader.init();