阿里云上传图片


 小程序上传可以看这个https://www.jianshu.com/writer#/notebooks/45366587/notes/68450036

最近需要用到上传本地图片到阿里云,自己做了个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