阿里云上传图片

最新推荐文章于 2024-11-28 20:02:40 发布

lceBear

最新推荐文章于 2024-11-28 20:02:40 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/simba-lkj/p/6594691.html

本文介绍如何使用阿里云SDK实现本地图片上传至阿里云OSS服务。通过Ajax获取临时凭证，利用JavaScript完成文件选择监听及上传操作，并解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要用到上传本地图片到阿里云，自己做了个demo

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> //引入阿里云sdk文件
<input type="file" id="file" />
<script type="text/javascript">
			var stokeUrl = "*********"; //阿里云地址
			var accessKeyId = '',
				accessKeySecret = '',
				stsToken = '';
				
			ajax("GET", stokeUrl, function(res) {
				var str = JSON.parse(res);
				accessKeyId = str.data.accessKeyId,
					accessKeySecret = str.data.accessKeySecret,
					stsToken = str.data.securityToken;
				//获得权限
				var client = new OSS.Wrapper({
					region: 'oss-cn-hangzhou',//你自己的地址
					accessKeyId: accessKeyId,
					accessKeySecret: accessKeySecret,
					stsToken: stsToken,
					bucket: '*****'//文件名称
				});
				
				document.getElementById('file').addEventListener('change', function(e) {
					var file = e.target.files[0];
					console.log(e);
					var storeAs = 'upload-file';
					//图片名
					storeAs = 'test/'+file.name //所要上传的文件名拼接 (test/)
					console.log(storeAs);
					client.multipartUpload(storeAs, file).then(function(result) {
						console.log("上传成功");
						console.log(result);
						//获得图片地址
						var src = 'https://www.treeholeapp.com/' + result.name;
						$("#img").attr('src', src);//赋值给img元素
						
					}).catch(function(err) {
						console.log("上传失败");
						console.log(err);
					});
				});

			})

			function ajax(type, url, fnSucc, fnFaild) {
				//1.创建Ajax对象
				var oAjax = null;
				if(window.XMLHttpRequest) {
					oAjax = new XMLHttpRequest();
				} else {
					oAjax = new ActiveXObject("Microsoft.XMLHTTP");
				}

				//2.连接服务器
				oAjax.open(type, url, true);

				//3.发送请求
				oAjax.send();

				//4.接收服务器的返回
				oAjax.onreadystatechange = function() {
					if(oAjax.readyState == 4) //完成
					{
						if(oAjax.status == 200) //成功
						{
							fnSucc(oAjax.responseText);
						} else {
							if(fnFaild)
								fnFaild(oAjax.status);
						}
					}
				};
			}
		</script>

　　阿里云上传到服务器主要步骤就是请求权限 ajax请求上传

其实到这里基本结束了，但是你会发现，提交的时候会产生: No 'Access-Control-Allow-Origin' header is present on the requested resource. 跨域请求，这时需要检查你的阿里云服务器设置请求头，具体参考阿里云OSS跨域，会有设置的API

转载于:https://www.cnblogs.com/simba-lkj/p/6594691.html