js前端直传阿里云OSS，解决大文件上传限制
使用js直传oss阿里云存储文件，解决大文件上传服务器限制_js上传oss_孙奋斗的博客-CSDN博客使用js直传oss阿里云存储文件，解决大文件上传服务器限制每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。具体流程如下图所示。客户短上传和数据直传到OSS相比，以上方法有三个缺点：上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。扩展性差
https://blog.csdn.net/qq_42958118/article/details/117601544
使用js直传oss阿里云存储文件，解决大文件上传服务器限制
- 每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。具体流程如下图所示。
客户短上传和数据直传到OSS相比，以上方法有三个缺点：
上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。
扩展性差：如果后续用户多了，应用服务器会成为瓶颈。
费用高：需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器。
上面可能废话有点多（阿里云官方解释），下面咱别写代码边解释！
以上oss直传js文件目录（后面可以下载！）
upload.js
accessid= '***';//阿里云oss accessid
accesskey= '***';//阿里云oss accesskey
host = 'https://***.oss-cn-beijing.aliyuncs.com';//Bucket 域名g_dirname1 = ''
g_object_name1 = ''
g_object_name1_type = ''
now = timestamp = Date.parse(new Date()) / 1000;var policyText1 = {"expiration": "2040-12-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了"conditions": [["content-length-range", 0, 3048576000] // 设置上传文件的大小限制]
};var policyBase65 = Base64.encode(JSON.stringify(policyText1))
message1 = policyBase65
var bytes1 = Crypto.HMAC(Crypto.SHA1, message1, accesskey, { asBytes: true }) ;
var signature1 = Crypto.util.bytesToBase64(bytes1);
//设置成随机文件名
function check_object_radio1() {var tt = document.getElementsByName('myradio1');for (var i = 0; i < tt.length ; i++ ){if(tt[i].checked){g_object_name1_type = tt[i].value;break;}}
}//设置上传目录
function get_dirname1()
{dir = document.getElementById("dirname1").value;/前台做了一个输入框可以自己定义上传的目录// dir ='';if (dir != '' && dir.indexOf('/') != dir.length - 1){dir = dir + '/'}g_dirname1 = dir
}function random_string1(len) {len = len || 32;var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';var maxPos = chars.length;var pwd = '';for (i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;
}function get_suffix1(filename) {pos = filename.lastIndexOf('.')suffix = ''if (pos != -1) {suffix = filename.substring(pos)}return suffix;
}function calculate_object_name1(filename)
{if (g_object_name1_type == 'local_name'){g_object_name1 += "${filename}"}else if (g_object_name1_type == 'random_name'){suffix = get_suffix1(filename)g_object_name1 = g_dirname1 + random_string(10) + suffix}return ''
}function get_uploaded_object_name1(filename)
{if (g_object_name1_type == 'local_name'){tmp_name = g_object_name1tmp_name = tmp_name.replace("${filename}", filename);return tmp_name}else if(g_object_name1_type == 'random_name'){return g_object_name1}
}function set_upload_param1(up, filename, ret)
{g_object_name1 = g_dirname1;if (filename != '') {suffix = get_suffix1(filename)calculate_object_name1(filename)}new_multipart_params = {'key' : g_object_name1,//'policy': policyBase65,'OSSAccessKeyId': accessid,'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': signature1,};up.setOption({'url': host,'multipart_params': new_multipart_params});up.start();
}
var timer1,tryTime1,maxTry1=5,delay1=3000,num=0;
var uploader1 = new plupload.Uploader({//在文件里引入了一个 plupload前端上传插件runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles1',//multi_selection: false,container1: document.getElementById('container1'),flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',url : 'http://oss.aliyuncs.com',init: {PostInit: function() {document.getElementById('ossfile1').innerHTML = '';document.getElementById('postfiles1').onclick = function() {set_upload_param1(uploader1, '', false);return false;};},FilesAdded: function(up, files) {//选择文件的信息plupload.each(files, function(file) {if(num==0){document.getElementById('ossfile1').innerHTML += '' + file.name + ' (' + plupload.formatSize(file.size) + ')'+''+'';num++;}else{return false;}});},BeforeUpload: function(up, file) {check_object_radio1();get_dirname1();set_upload_param1(up, file.name, true);},UploadProgress: function(up, file) {var d = document.getElementById(file.id);d.getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";var prog = d.getElementsByTagName('div')[0];var progBar = prog.getElementsByTagName('div')[0]progBar.style.width= 5*file.percent+'px';progBar.setAttribute('aria-valuenow', file.percent);},FileUploaded: function(up, file, info) {if (info.status == 200){tryTime1 = 0;//注释的地方是前端页面的一个视频播放组件// timer1 = setInterval(getDuration1, delay1);// videoElem = document.getElementById("au");// videoElem.innerHTML = '';// videoElem.play();$("#audioUrl").val(host+"/"+file.name+"");//返回的参数赋值到form之中document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name1(file.name);}else{document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;}},Error: function(up, err) {document.getElementById('console1').appendChild(document.createTextNode("\nError xml:" + err.response));}}
});function getDuration1() {clearInterval(timer1);var hour = parseInt((au.duration)/3600);var minute = parseInt((au.duration%3600)/60);var second = Math.ceil(au.duration%60);$("#showByNones").show();$("#lengthTime1").val(hour+":"+minute+":"+second);var lengthTime = $("#lengthTime").val();if (lengthTime == null || lengthTime == "") {$("#showByNones2").show();$("#lengthTime").val(hour+":"+minute+":"+second);}
}
uploader1.init(); 上传不仅仅上面一个文件还有lib文件夹里面的一些插件包
下面看下我自己写的前端页面```html
div class="form-group"> 上传文件名字保持本地文件名字 上传文件名字是随机文件名上传到指定目录:
您所选择的文件：
选择文件开始上传
上传效果如下：
下载文件直接傻瓜式操作！！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！