阿里云oss对象存储 js web直传中文件重命名和文件数量限制问题的解决

阿里云oss 的js web直传官方给出了样例，但是很难搜索到对于文件名重新命名的方法。这里当一个互联网的搬运工，把js直传中文件名重新命名的demo源码和官方文档部分整理了一下。建议阅读该案例先理解一下plupload这个js文件上传框架的基本用法，因为阿里云oss的js直传就是用的这个框架。


//注意，阅读顺序请按照注释的标号进行
accessid= '6MKOqxGiGU4AUk44';//替换成自己的，要记得登录oss的管理界面设置cors，即跨域访问的设置
accesskey= 'ufu7nS8kS59awNihtjSonMETLI0KLy';//替换成自己的
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';//替换成自己的
 
g_dirname = ''
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000; 
//5 如果想要在这个界面设置可变的参数，可以在index.html中设置隐藏的文本域，通过getElementById的方法可以得到对应的value
 
var policyText = {
    "expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
    "conditions": [
    ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
    ]
};
 
var policyBase64 = Base64.encode(JSON.stringify(policyText))
message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;
var signature = Crypto.util.bytesToBase64(bytes);
 
function check_object_radio() {//2这里可以对文件名进行设置，如果要重命名文件名，就把方法体里的代码替换成 g_object_name_type = 'random_name';
    var tt = document.getElementsByName('myradio');
    for (var i = 0; i < tt.length ; i++ )
    {
        if(tt[i].checked)
        {
            g_object_name_type = tt[i].value;
            break;
        }
    }
}
 
function get_dirname()
{//3该方法设置文件存放的目录，案例给出的是读取页面设置的目录，自己用时可以替换成固定的
    dir = document.getElementById("dirname").value;
    if (dir != '' && dir.indexOf('/') != dir.length - 1)
    {
        dir = dir + '/'
    }
    //alert(dir)
    g_dirname = dir
}
 
function random_string(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_suffix(filename) {//该方法是得到文件名的后缀名
    pos = filename.lastIndexOf('.')
    suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}
 
function calculate_object_name(filename)
{
    if (g_object_name_type == 'local_name')
    {
        g_object_name += "${filename}"
    }
    else if (g_object_name_type == 'random_name')
    {//把生成的文件名和后缀名拼接到一起
        suffix = get_suffix(filename)
        g_object_name = g_dirname + random_string(10) + suffix
    }
    return ''
}
 
function get_uploaded_object_name(filename)
{//得到上传的文件名
    if (g_object_name_type == 'local_name')
    {
        tmp_name = g_object_name
        tmp_name = tmp_name.replace("${filename}", filename);
        return tmp_name
    }
    else if(g_object_name_type == 'random_name')
    {
        return g_object_name
    }
}
 
function set_upload_param(up, filename, ret)
{//4设置上传的参数
    g_object_name = g_dirname;
    if (filename != '') {
        suffix = get_suffix(filename)
        calculate_object_name(filename)
    }
    new_multipart_params = {
        'key' : g_object_name,
        'policy': policyBase64,
        'OSSAccessKeyId': accessid, 
        'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
        'signature': signature,
    };
 
    up.setOption({
        'url': host,
        '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 : 'http://oss.aliyuncs.com',
 
	init: {
		PostInit: function() {
			document.getElementById('ossfile').innerHTML = '';
			document.getElementById('postfiles').onclick = function() {
            set_upload_param(uploader, '', false);
            return false;
			};
		},
 
		FilesAdded: function(up, files) {//文件添加时执行的方法，files为单次打开文件添加窗口时添加的文件数组，不是上传列表中总共的文件数。
			plupload.each(files, function(file) {
				document.getElementById('ossfile').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>';
			});
		},
 
		BeforeUpload: function(up, file) {//1该方法在上传前执行，做一些上传前对文件进行处理和参数设置，文件名的修改就在这里进行
 
		//var s = up.files.length;这块内容可以限制上传文件只能有一个，打开这块注释后，当选择多个文件的时候之后上传最后一个文件
		//if (s > 1) {
		//	up.splice(0, s - 2);
		//}
 
            check_object_radio();
            get_dirname();
            set_upload_param(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= 2*file.percent+'px';
			progBar.setAttribute('aria-valuenow', file.percent);
		},
 
		FileUploaded: function(up, file, info) {//上传完成之后执行的方法
            if (info.status == 200)
            {
                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name);//6 可以在这里得到文件上传完成后的文件名称
            }
            else
            {
                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
            } 
		},
 
		Error: function(up, err) {
			document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
		}
	}
});
uploader.bind(//绑定文件上传事件，可以对文件类型以及文件数量进行验证
	'FilesAdded',
	function(up, files) {
 
		if (!/.(avi|rmvb|rm|asf|divx|mpg|mpeg|mpe|wmv|mp4|mkv|vob|MOV)$/.test(files[0].name)) {
			alert("视频类型必须是avi，rmvb，rm，asf，divx，mpg，mpeg，mpe，wmv，mp4，mkv，vob,mov中的一种");
			count++;
			return false;
					}
		if (uploader.files.length - count > 1) {
 
			alert("多个视频将只上传最后一个！！");
			uploader.splice(0, uploader.files.length - 1);
		}
 
});
 
uploader.init();

转载请注明：有客帮 » 阿里云oss对象存储 js web直传中文件重命名和文件数量限制问题的解决