使用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_name1
        tmp_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 += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
                        +'<div class="progress"><div class="progress-bar" style="width:0%"></div></div>'
                        +'</div>';
                    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 = '<span>' + file.percent + "%</span>";
            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 = '<source class="source" src="'+host+'/'+file.name+'" type="video/mp4">';
                // 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">
                        <label class="col-sm-2 control-label">商品视频：</label>
                        <div class="col-sm-10">
                            <div style="display: none;">
                                <input type="radio" name="myradio1" value="local_name" checked=true/> 上传文件名字保持本地文件名字
                                <input type="radio" name="myradio1" value="random_name" /> 上传文件名字是随机文件名
                                上传到指定目录:<input type="text" id='dirname1' placeholder="如果不填，默认是上传到根目录" size=50>
                            </div>
                                <div>
<!--                                    <video height="240" object-fit="scale-down" controls="controls" muted="muted"  loop id="au">-->
<!--                                    </video>  这个是html的视频组件和upload.js里面对应起来即可-->

                            <h4>您所选择的文件：</h4>
                                    <div id="ossfile1" style="width: 200px;"></div>
                                    <div id="container1">
                                        <a id="selectfiles1" href="javascript:void(0);" class='btn'>选择文件</a>
                                        <a id="postfiles1" href="javascript:void(0);" class='btn'>开始上传</a>
                                    </div>
<!--                                    <pre id="console1"></pre>  里面是上传的回调信息-->
                                </div>

                        </div>
                    </div>
           <div class="form-group"  id="showByNones">
                <label class="col-sm-2 control-label">视频网络地址：</label>
                <div class="col-sm-10">
                    <input id="audioUrl" name="video" class="form-control"
                           type="text"  value="{$data.video|default=''}" readonly="readonly">
                </div>
            </div>

<!--       下面是引入的js      -->
<script type="text/javascript" src="__PUBLIC__/js/oss/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/oss/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/oss/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/oss/lib/base64.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/js/oss/upload1.js?v=3.6"></script>

上传效果如下：
在这里插入图片描述

下载文件直接傻瓜式操作！！！

# 服务器 # 运维 # 阿里云
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解读TaurusDB字段压缩：减少存储成本，避免语句大量修改

avatar 华为开发者空间
cover

使用DAS的导出和导入功能迁移GaussDB数据

avatar 华为开发者空间

如何基于Sharding-JDBC实现GaussDB在客户端应用的读写分离

使用sharing-jdbc中间件实现GaussDB读写分离操作，在服务器资源吃紧与高并发场景下可以考虑采用读写分离架构减轻负载。

avatar 华为开发者空间