当前位置: 首页 > 工具软件 > S3Uploader > 使用案例 >

Uploader插件上传到amazon s3

南门嘉
2023-12-01
var OSSFileLoad = function(data){
//-----------开始------------//
var ossContentId = data.ossContentId;//上传组件渲染区域id
var fileSuffix = data.fileSuffix;//上传文件类型,如图片:"jpg,png,gif,bmp"
var ossPath = data.ossPath;//长传成功后文件路径输出的input的id
var OSSDir = data.OSSDir;// OSS文件存储目录
var fileRealName = data.fileRealName;// 文件真实名称输出input的id
var multi = data.multi?data.multi:false; //true可上传多文件,false只能上传单个文件
var html = 
	'<div class="ossfile" style="margin-left:110px;"></div>'+
	'<div class="layui-input-block filescontainer">'+
	'	<a class="btn selectfiles" href="javascript:void(0);">选择文件</a>'+
	'	<a href="javascript:void(0);" class="btn postfiles">开始上传</a>'+
	'</div>'+
	'<pre class="domConsole" style="margin-left:110px;"></pre>';
$("#"+ossContentId).append(html);

//OSS环境公共参数,这个accessKey仅有osshanyatemp buckey权限
// var accessid = '阿里云accessid ';
// var accesskey = '阿里云accesskey ';
// var host = 'http://桶名称.oss-cn-hangzhou.aliyuncs.com';

	//太极云密钥
  var accessid = '太极云accessid ';
  var accesskey = '太极云accesskey ';
  var host = 'http://xxx.xxx.xxx.xxx:8060/桶名称';
var dir = 'file/';
if(OSSDir!=undefined && OSSDir!=null && OSSDir!=''){dir=OSSDir+"/"}
var policyText = {
	"expiration" : "2220-01-01T12:00:00.000Z", // 设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
	"conditions" : [ ["content-length-range", 0, 1048576000*20] /* 设置上传文件的大小限制*/]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText));
var bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
	asBytes : true
});
var signature = Crypto.util.bytesToBase64(bytes);

/*生成随机字符串*/
function randomStr(len) {
	len = len || 32;
	var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789';
	var maxPos = chars.length;
	var pwd = '';
	for (i = 0; i < len; i++) {
		pwd += chars.charAt(Math.floor(Math.random() * maxPos));
	}
	return pwd;
}
/*获取文件后缀*/
function getSuffix(filename) {
	var pos = filename.lastIndexOf('.')
	suffix = ''
	if (pos != -1) {
		suffix = filename.substring(pos);
	}
	return suffix;
}

/*生成随机文件名*/
function getRandomName(filename) {
	var suffix = getSuffix(filename);
	var rs = randomStr();
	var currTime = new Date().getTime();
	return dir+currTime+"_"+rs+suffix;
}
/*设置上传参数*/    //点击 开始上传按钮
function setUploadParam(up,fn) {
	var multipartParams = {
		'key' : fn==''?'':$(fn).attr("fn"),
		//'policy' : policyBase64,
		//'OSSAccessKeyId' : accessid,
		'AWSAccessKeyId':accessid,
		'success_action_status' : '201', // 让服务端返回200,不然,默认会返回204
		'signature' : signature,
        'acl' : 'public-read'
	}
	up.setOption({
		'url' : host,
		'multipart_params' : multipartParams
	});
	up.start();
}

/*上传*/
var fileUploader = new plupload.Uploader({
	runtimes : 'html5,flash,silverlight,html4',
	browse_button : document.getElementById(ossContentId).getElementsByClassName("selectfiles")[0], //$('#'+ossContentId+' .selectfiles'),
	container : document.getElementById(ossContentId).getElementsByClassName("filescontainer")[0], //$('#'+ossContentId+' .filescontainer'),
	flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
	silverlight_xap_url : 'lib/-2.1.2/js/Moxie.xap',
	url : host,
	multi_selection:multi,
	filters: {
		mime_types : [{ "title" : "文件格式限制", "extensions" : fileSuffix }],
		//max_file_size : '400kb', //最大只能上传400kb的文件
		prevent_duplicates : true //不允许选取重复文件
	},

	init : {
		//一开始就加载
		PostInit : function() {
			$('#'+ossContentId+' .ossfile').html('');
			$('#'+ossContentId+' .postfiles').on('click',function() {
				setUploadParam(fileUploader,'');
				return false;
			});
		},
		//选择文件后
		FilesAdded : function(up, files) {
			plupload.each(files, function(file) {
			    if(multi){
				$('#'+ossContentId+' .ossfile').append('<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>');
			    }else{
				$('#'+ossContentId+' .ossfile').html('<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) {
			$(file).attr("fn",getRandomName(file.name));
			setUploadParam(up, file);
		},
		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 || info.status < 200) {
				var oldPath = $('#'+ossPath).val();
				var newpath = $(file).attr("fn");
				document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传成功 <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" data-path="'+newpath+'">删除</a>';
                if (oldPath == "" || !multi) {
                    $('#'+ossPath).val(newpath);
                } else {
                    $('#'+ossPath).val(oldPath + "," + newpath);
                }
				if(fileRealName!=undefined && fileRealName!=null && fileRealName!=""){
					var realName = $('#'+fileRealName).val();
					var realNameNew = $(file).attr("name");
					if (realName == "" || !multi) {
						$('#'+fileRealName).val(realNameNew);
					} else {
						$('#'+fileRealName).val(realName + "," + realNameNew);
					}
				}
				$("#"+fileRealName).trigger("change");
				$("#"+ossPath).trigger("change");
				var viewPath = host + '/' + $(file).attr("fn");
				console.log(viewPath)
			} else {
				document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
			}
		},
		Error : function(up, err) {
			$('#'+ossContentId+' .domConsole').append(document.createTextNode("\n错误::" + err.message));
		}
	}
});
$("#"+ossContentId).on('click','a.layui-btn-xs',function(){
	var np = $(this).attr("data-path");
	var OSSPath = $('#'+ossPath).val();
	if(OSSPath!=''){
		var arr = OSSPath.split(",");
		var idx = arr.indexOf(np);
		if(idx!=-1){
			arr.remove(idx);
			$('#'+ossPath).val(arr.toString())
			if(fileRealName!=undefined && fileRealName!=null && fileRealName!=""){
				var realPath = $('#'+fileRealName).val();
				var arrReal = realPath.split(",");
				arrReal.remove(idx);
				$('#'+fileRealName).val(arrReal.toString())
			}
			$(this).parent().parent().remove()
		}
		$("#"+fileRealName).trigger("change");
		$("#"+ossPath).trigger("change");
	}
});

fileUploader.init();

//-----------结束------------//
}
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

以前是阿里云存储的,现在需要改成亚马逊的存储既aws s3.改动的地方。
var multipartParams = {
        'key' : fn==''?'':$(fn).attr("fn"),
        //'policy' : policyBase64,
        //'OSSAccessKeyId' : accessid,
        'AWSAccessKeyId':accessid,
        'success_action_status' : '201', // 让服务端返回200,不然,默认会返回204
        'signature' : signature,
        'acl' : 'public-read'
    }

把OSSAccessKeyId改成AWSAccessKeyId,然后密钥和url换成亚马逊的。然后把policy去掉
s3里的文件夹的读写权限都要开放

 类似资料: