oss web服務端簽名後直傳圖片上傳

時間 2019-11-12

標籤 oss web 服務簽名圖片上傳欄目 HTML 简体版

原文原文鏈接

<!-- 項目源碼地址  https://github.com/Pangnz/OssUpload -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>web直傳oss</title>
		<style type="text/css">
			.file-box {
				position: relative;
				display: inline-block;
				width: 160px;
				height: 160px;
				background: url(img/aaa.png) no-repeat;
				background-size: cover;
				background-position: center;
			}

			#input_file {
				width: 100%;
				height: 100%;
				opacity: 0;
				filter: alpha(opacity=0);
			}
		</style>
	</head>

	<body>
		<p>oss web服務端簽名後直傳</p>
		<div class="file-box">
			<input type="file" value="" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
			 onchange="imgPreview(this,0)">
		</div>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let uploadObj; // 上傳憑證對象
			let verifyImg; //上傳以後的圖片oss地址
			function imgPreview(fileDom, i) {
				// 獲取上傳憑證
				$.ajax({
					url: '', // 這裏是請求的後臺經過oss上傳憑證的接口
					data: JSON.stringify({
						data: ''
					}),
					dataType: 'json',
					type: 'post',
					headers: {
						'Content-Type': 'application/json',
					},
					success: function(response) {
						if (response && response.header.ret == 'S') {
							uploadObj = response.data;
							// 獲取到上傳憑證成功以後 封裝請求的數據
							let request = new FormData();
							request.append("OSSAccessKeyId", uploadObj.accessid); //Bucket 擁有者的Access Key Id。
							request.append("policy", uploadObj.policy); //policy規定了請求的表單域的合法性
							request.append("Signature", uploadObj.signature); //根據Access Key Secret和policy計算的簽名信息，OSS驗證該簽名信息從而驗證該Post請求的合法性
							//---以上都是阿里的認證策略 							
							let file = document.getElementById("input_file").files[0];
							if (!file) {
								return;
							}
							request.append("key", `${uploadObj.dir}/${file.name}`); //文件名字，可設置路徑
							request.append("success_action_status", '200'); // 讓服務端返回200,否則，默認會返回204
							request.append('file', file); //須要上傳的文件 file  
							$.ajax({
								url: uploadObj.host, //上傳阿里地址
								data: request,
								processData: false, //默認true，設置爲 false，不須要進行序列化處理
								cache: false, //設置爲false將不會從瀏覽器緩存中加載請求信息
								async: false, //發送同步請求
								contentType: false, //避免服務器不能正常解析文件---------具體的能夠查下這些參數的含義
								dataType: 'json', //不涉及跨域  寫json便可
								type: 'post',
								success: function(response) { //callbackHost：success,request中就是 回調的一些信息，包括狀態碼什麼的 
									// console.log(response);
								},
								error: function(error) {
									alert("上傳圖片成功");
									verifyImg = `${uploadObj.host}/${uploadObj.dir}/${file.name}`;
								}
							});
						} else {
							alert(`${response && response.header.msg[0]}`);
						}
					},
					error: function(error) {
						console.log(error);
					},
				});
				console.log(`上傳的文件oss地址${verifyImg}`);
				//判斷是否支持FileReader
				if (window.FileReader) {
					var reader = new FileReader();
				} else {
					alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
				}
				//獲取文件
				var file = fileDom.files[0];
				if (!file) {
					return;
				}
				var imageType = /^image\//;
				//是不是圖片
				if (!imageType.test(file.type)) {
					alert("請選擇圖片！");
					return;
				}
				//讀取完成
				reader.onload = function(e) {
					//圖片路徑設置爲讀取的圖片
					// img.src = e.target.result;
					document.getElementsByClassName('file-box')[i].style.background = "url(" + e.target.result + ")no-repeat"; //回顯圖片
					document.getElementsByClassName('file-box')[i].style.backgroundSize = '';
				};
				reader.readAsDataURL(file);
			}
		</script>
	</body>
</html>

　效果以下javascript

項目源碼地址  https://github.com/Pangnz/OssUpload

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

oss web服務端簽名後直傳 圖片上傳

oss web服務端簽名後直傳圖片上傳