1.本人项目使用jquery写的,而阿里云oss代码是原生js所以有些地方会两者共用。
2.这里只展示前端的代码部分,整个流程是由后台生成签名–>前端点击上传文件的时候获取到后台返回的accessid、host、policy、signaturecom等参数–>请求成功并获取到返回参数后前端将这些参数重新赋值(祥见代码),赋值成功后oss的puload组件会自动提交到后台返回的host参数内的链接地址。–>此时文件提交就成功了
3.本次项目使用的是阿里云oss的服务端签名直传并设置回调。
4.下载客户端源码
5.因为本人项目用的jquery所以就直接在项目中引用了源码,如果是vue或者其他框架的话也可以npm进行安装plupload,我这里是直接script标签引入文件包
6.接下来就是在源码内根据需求进行更改开发
accessid = ''
accesskey = ''
host = ''
policyBase64 = ''
signature = ''
filename = ''
key = ''
expire = new Date().getTime() + 1000 * 60 * 30//设置签名过期时间,如果是后台设置该参数,则前端可以忽略不设置。
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000;
function send_request(opt) {//ajax封装,源码内使用的是原生xmlhttp进行的请求,为了项目方便进行了重新封装。
opt = opt || {};
opt.method = (opt.method || 'GET').toUpperCase();
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {
};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, op