[JavaScript知识库] 阿里云OSS前端直传踩坑

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 阿里云OSS前端直传踩坑 -> 正文阅读

[JavaScript知识库]阿里云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.com
    url : '这里用 endpoint',

});

uploader.init();