阿里oss文件上傳

時間 2019-12-25

原文原文鏈接

java代碼上傳參數javascript

```
##阿里雲oss上傳 參數 (注意 endpoint的格式形如「http://oss-cn-hangzhou.aliyuncs.com/」，注意http://後不帶bucket名稱，)
oss_access_key =LTAI6ScalfVxxxx
oss_access_key_secret =LFWF9MdYnHpFpU0ZU5R55tqvADxxx
oss_showEndpoint =http://xxx.oss-cn-beijing.aliyuncs.com/
oss_endpoint =oss-cn-beijing.aliyuncs.com
oss_bucket_name =xxx
oss_folder =xxx/
oss_folder_video =video/
 //阿里雲API顯示路徑
    @Value("${oss_showEndpoint}")
    private String ossShowEndpoint ; 
    //阿里雲API上傳路徑
    @Value("${oss_endpoint}")
    private String ossEndpoint ;  
    //阿里雲API的密鑰Access Key ID  
    @Value("${oss_access_key}")
    private String ossAccessKey;
    //阿里雲API的密鑰Access Key Secret  
    @Value("${oss_access_key_secret}")
    private String ossAccessKeySecret;  
    //阿里雲API的bucket名稱  
    @Value("${oss_bucket_name}")
    private String ossBacketName;  
    //阿里雲API的文件夾名稱  
    @Value("${oss_folder}")
    private String ossFolder; 
    //阿里雲API的文件夾名稱  
    @Value("${oss_folder_video}")
    private String ossFolderVideo;
 @Action(value = "/video/video/getSnt", results = {@Result(name = JSON, type = JSON, params = {"root", "result"})})
    public String get() {
        //TODO 文件名重複--oss那邊會自動查重
        String endpoint = settings.getOssEndpoint();
        String accessId = settings.getOssAccessKey();
        String accessKey = settings.getOssAccessKeySecret();
        String dir = settings.getOssFolder()+settings.getOssFolderVideo();
        String host = settings.getOssShowEndpoint();
        OSSClient client = new OSSClient(endpoint, accessId, accessKey);
        try {
            long expireTime = 1*60*60;//1小時
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);
            Map<String, Object> respMap = new LinkedHashMap<String, Object>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir+FORMAT+"/");
            respMap.put("host", host);
            respMap.put("expire", formatISO8601Date(expiration));
            resultMessage(respMap);
            
            
            //TODO 回調測試 本地測試回調地址進不來
            Map<String, Object> backUrlMap = new LinkedHashMap<String, Object>();
            backUrlMap.put("callbackUrl", "xxx.top:8081/common/console/index.action");//這邊的action進不來 先不作
            backUrlMap.put("callbackHost", "xxx.top");
            backUrlMap.put("callbackBody", "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
            backUrlMap.put("callbackBodyType", "application/x-www-form-urlencoded");
            
            JSONObject backUrlString = JSONObject.fromObject(backUrlMap);
            final Base64 base64 = new Base64();
            final byte[] textByte = backUrlString.toString().getBytes("UTF-8");
            //編碼
            final String encodedText = base64.encodeToString(textByte);
            System.out.println(encodedText);
            //解碼
            System.out.println(new String(base64.decode(encodedText), "UTF-8"));
            
            //TODO 增長oss管理 須要判斷前端這個文件是否正確上傳(先後端都要回調方法)
        } catch (Exception e) {
            Assert.fail(e.getMessage());
            resultMessage(FAIL, e.getMessage());
        }
        return JSON;
    }
    
    private String formatISO8601Date(Date expiration) {
        String pattern = "yyyy-MM-dd'T'HH:mm:ss:SSSZZ";
        return DateFormatUtils.format(expiration, pattern);
    }

js
	```
accessid = ''
	accesskey = ''
	host = ''
	policyBase64 = ''
	signature = ''
	callbackbody = ''
	filename = ''
	key = ''
	expire = 0
	g_object_name = ''
	g_object_name_type = ''
	now = timestamp = Date.parse(new Date()) / 1000; 

	function send_request()
	{
	    var xmlhttp = null;
	    if (window.XMLHttpRequest)
	    {
	        xmlhttp=new XMLHttpRequest();
	    }
	    else if (window.ActiveXObject)
	    {
	        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  
	    if (xmlhttp!=null)
	    {
	        serverUrl = '/video/video/getSnt.action'
	        xmlhttp.open( "GET", serverUrl, false );
	        xmlhttp.send( null );
	        return xmlhttp.responseText
	    }
	    else
	    {
	        alert("您的瀏覽器不支持XMLHTTP,建議使用谷歌瀏覽器");
	    }
	};

	function check_object_radio() {
	    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_signature()
	{
	    //能夠判斷當前expire是否超過了當前時間,若是超過了當前時間,就從新取一下.3s 作爲緩衝
	    now = timestamp = Date.parse(new Date()) / 1000; 
	    if (expire < now + 3)
	    {
	        body = send_request()
	        var obj = eval ("(" + body + ")");
	        host = obj['host']
	        policyBase64 = obj['policy']
	        accessid = obj['accessid']
	        signature = obj['signature']
	        expire = parseInt(obj['expire'])
	        callbackbody = obj['callback'] 
	        key = obj['dir']
	        return true;
	    }
	    return false;
	};

	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 = key + 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 createObjectURL(object) {
	    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
	}

	function set_upload_param(up, filename, ret)
	{
	    if (ret == false)
	    {
	        ret = get_signature()
	    }
	    g_object_name = key;
	    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
	        'callback' : callbackbody,
	        'signature': signature,
	    };

	    up.setOption({
	        'url': host,
	        'multipart_params': new_multipart_params
	    });

	    up.start();
	}
	
	function video_upload_cancel(file_id) {  //取消上傳
		uploader.stop();
        var obj_file = uploader.getFile(file_id.id);
        uploader.removeFile(obj_file);
        var $fileDelete=$("#"+file_id.id);
        $fileDelete.remove();
    }
	
	
	function video_upload_delete(file_id) {  //刪除視頻
        var obj_file = uploader.getFile(file_id.id);
        var fileName=host+get_uploaded_object_name(obj_file.name);
        business.video.deleteVideo(fileName);
        uploader.removeFile(obj_file);
        var $fileDelete=$("#"+file_id.id);
        $fileDelete.remove();
    }


	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',

	    filters: {
	        mime_types : [ //只容許上傳圖片和mp4文件
	        { title : "MP4 files", extensions : "flv,mp4" }
	        ],
	        max_file_size : '500mb', //最大隻能上傳10mb的文件
	        prevent_duplicates : true //不容許選取重複文件
	    },

		init: {
			PostInit: function() {
				document.getElementById('ossfile').innerHTML = '';
				document.getElementById('postfiles').onclick = function() {
	            set_upload_param(uploader, '', false);
	            return false;
				};
			},

			FilesAdded: function(up, 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>';
//				});
				var file=files[files.length-1].getSource().getSource();
				var fileBefore=files[files.length-1];
				var tol = 0; //獲取總時長 秒
				var url = createObjectURL(file);
				var lock=false;
				    $("#fileVideo").prop("src", url);
				    $("#fileVideo")[0].addEventListener("loadedmetadata", function() {
				    	if(lock==false){
					    	tol = this.duration; //獲取總時長 秒
					        //console.log("時長：" + tol); 
					        document.getElementById('ossfile').innerHTML += '<div class="videoOssfile" id="' + fileBefore.id + '">' + fileBefore.name+ ' (time:' + tol +' ,' + plupload.formatSize(fileBefore.size) + ')'
							+'<div class="progress"><div class="progress-bar" style="width: 0%"><b style="color: green; position: absolute;left: 210px;"></b><a href="javascript:void(0);" class="video_upload_cancel" style="color: green; position: absolute;left: 270px;" onclick="video_upload_cancel('+fileBefore.id+')">取消上傳</a>  <a href="javascript:void(0);" class="video_upload_delete" style="display:none;  color: red; position: absolute; left: 270px;" onclick="video_upload_delete('+fileBefore.id+')">刪除視頻</a>   </div></div>'
							+'</div>';
					        $("#videoFileSize").val(fileBefore.size);
					        $("#videoFileTime").val(tol);
					        lock=true;
				    	}
				 });
			    var param = {};
				var inputs =  $(".BasicInfo").find("input,select");
				if(!business.video.beforeUpload(param,inputs)){
				    return false;
				}  
				 
			},

			BeforeUpload: function(up, file) {
	            check_object_radio();
	            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 = '</br>upload to oss success, object name:' + get_uploaded_object_name(file.name);
	                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上傳成功!';
	                $("#"+file.id).find(".video_upload_delete").show();
	                $("#"+file.id).find(".video_upload_cancel").hide();
	                //TODO 保存到數據庫--這邊是回調方法
	                //調用video/upload.js的上傳方法 
	                $("#videoFileName").val(host+get_uploaded_object_name(file.name));
	                console.log("上傳路徑:"+$("#videoFileName").val()); 
	                //上傳
	                business.video.upload();
	            }
	            else
	            {
	                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
	            } 
			},

			Error: function(up, err) {
	            if (err.code == -600) {
	                document.getElementById('console').appendChild(document.createTextNode("\n選擇的文件太大了,能夠根據應用狀況，在upload.js 設置一下上傳的最大大小"));
	            }
	            else if (err.code == -601) {
	                document.getElementById('console').appendChild(document.createTextNode("\n選擇的文件後綴不對,能夠根據應用狀況，在upload.js進行設置可容許的上傳文件類型"));
	            }
	            else if (err.code == -602) {
	                document.getElementById('console').appendChild(document.createTextNode("\n這個文件已經上傳過一遍了"));
	            }
	            else 
	            {
	                document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
	            }
			}
		}
	});

	uploader.init();

htmlphp

<video style="display:none;" controls="controls" id="fileVideo"></video>  
	<input style="display:none;!important" type="file" class="fileTime">  
	<input style="display:none;" type="radio" name="myradio" value="local_name" > 
	<input style="display:none;" type="radio" name="myradio" value="random_name" checked="true/"> 
	<div class="form-item">
	<form action="/video/video/uploadVideo.action"  method="post" id="uploadForm" > 
		<h4 style="display:none;">您所選擇的文件列表：</h4>
			<div class="form-label  label-required">
				視頻列表&nbsp;&nbsp;&nbsp;
			</div>
			<div class="form-data">  
				<div id="ossfile" style="min-width: 100px;min-height: 35px;"></div>
		 	</div>
		<br>
		<div class="form-label">
			&nbsp;&nbsp;&nbsp;
		</div>
		<div class="form-data">  
			<div id="container" style="position: relative;">
			<a id="selectfiles" href="javascript:void(0);" class="btn" style="position: relative; z-index: 1; height: 10px;line-height: 10px;background-color: forestgreen;margin: 0 20px;">選擇文件</a>
			<a id="postfiles" href="javascript:void(0);" style="position: relative; z-index: 1; height: 10px;line-height: 10px;background-color: forestgreen;" class="btn">開始上傳</a>
			<div id="html5_1c0o864eg1las1t11nonup31bnf3_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 82px; height: 34px; overflow: hidden; z-index: 0;"><input id="html5_1c0o864eg1las1t11nonup31bnf3" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,image/gif,image/png,image/bmp,application/zip,.rar"></div></div>
			<pre id="console" style="display:none;">
			選擇的文件太大了,能夠根據應用狀況，在upload.js 設置一下上傳的最大大小</pre>
			<input style="display:none;" id="videoFileName" name="videoFileName" type="text" style="width:350px;height:30px" disabled/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input style="display:none;" id="videoFileTime" name="videoFileTime" type="text" style="width:350px;height:30px" disabled/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input style="display:none;" id="videoFileSize" name="videoFileSize" type="text" style="width:350px;height:30px" disabled/>&nbsp;&nbsp;&nbsp;&nbsp;
			<a style="display:none;" id="uploadBt" href="javascript:business.clip.upload();" class="button-gray" id="upload" class="button-gray">選擇視頻</a>
		</div>
		 	</div>
	</form>
	</div>

js https://help.aliyun.com/document_detail/oss/practice/pc_web_upload/js_php_upload.html 須要用到html