阿里云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();