互联网新时代,除了纯信息展示类的网站,基本都是有文件上传功能的。但是随着业务的发展,如果上传的文件和数据库都和网站程序源代码放在一起,那是有相当多的弊端的。
1:用户体验比较差,
2:服务器的成本略高,
3:静态文件会占用大量带宽,
常规的做法是把源代码放到一台服务器上,图片等静态文件放在另一台服务器上
当一个神奇的“云”时代的到来后,一切就变的更加简单了。在业务还比较小的时候,我们无需大费周折的去搞一台静态文件服务器,直接使用第三方的即可。
如果对阿里云OSS有什么问题的可以自行查看 https://help.aliyun.com/document_detail/31817.html?spm=a2c4g.11186623.6.539.cB4wo2
下面简单介绍一下本地图片上传到阿里云OSS的两种方法
扫描二维码关注公众号,回复:
1032964 查看本文章
1.直接上传不保存到本地
测试页面直接用form表单提交,后台接收并上传,这样做由于form表单限制文件大小,而且不能对文件进行操作不是很好,不多介绍了
2.图片文件转成base64格式,接收并保存上传,
<div class="imgWrap"> <img id="objImg" class="showImg"> <input type="file" accept="image/*" onchange="selectFileImage(this, false, 2, '1')" data="1" class="jsImg"> <div class="logo_up"> <i></i> <span>添加图片</span> </div> <div class="jdtUP dn " style="left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 100%;"> <div> <img src="/Public/static/img/wait_proc.png" style="width: auto;"> </div> <div> <span>上传中...</span> </div> </div> </div>js处理:
function selectFileImage(fileObj, isupLoad, sign, myCardId, listIndex) { var file = fileObj.files['0']; console.log("file.size",file ) //图片方向角 added by lzk var Orientation = null; if (!file) { $(".jdtUP").hide(); return false; } var fileSize = Math.round(file.size / 1024 / 1024); if (file) { console.log("正在上传,请稍后..."); var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式 if (!rFilter.test(file.type)) { //showMyTips("请选择jpeg、png格式的图片", false); return; } //获取照片方向角属性,用户旋转控制 EXIF.getData(file, function () { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag(this, 'Orientation'); //return; }); var oReader = new FileReader(); oReader.onload = function (e) { var image = new Image(); image.src = e.target.result; image.onload = function () { var expectWidth = this.naturalWidth; var expectHeight = this.naturalHeight; if (this.naturalWidth > 800) { expectWidth = 800; expectHeight = expectWidth * this.naturalHeight / this.naturalWidth; } else if (this.naturalHeight > 1200) { expectHeight = 1200; expectWidth = expectHeight * this.naturalWidth / this.naturalHeight; } var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.clearRect(0, 0, canvas.width, canvas.width); ctx.drawImage(this, 0, 0, expectWidth, expectHeight); var base64 = null; //修复ios if (navigator.userAgent.match(/iphone/i)) { console.log('iphone'); //alert(expectWidth + ',' + expectHeight); //如果方向角不为1,都需要进行旋转 added by lzk if (Orientation != "" && Orientation != 1) { // alert('旋转处理'); switch (Orientation) { case 6://需要顺时针(向左)90度旋转 // alert('需要顺时针(向左)90度旋转'); rotateImg(this, 'left', canvas, canvas.width, canvas.height); break; case 8://需要逆时针(向右)90度旋转 // alert('需要顺时针(向右)90度旋转'); rotateImg(this, 'right', canvas, canvas.width, canvas.height); break; case 3://需要180度旋转 // alert('需要180度旋转'); rotateImg(this, 'right', canvas, canvas.width, canvas.height);//转两次 rotateImg(this, 'right', canvas, canvas.width, canvas.height); break; } } // 设置压缩比例 var compressRate = getCompressRate(1, fileSize); console.log(compressRate) base64 = canvas.toDataURL("image/jpeg", compressRate); } else if (navigator.userAgent.match(/Android/i)) {// 修复android // var encoder = new JPEGEncoder(); // alert('安卓'); var compressRate = getCompressRate(1, fileSize); base64 = canvas.toDataURL("image/jpeg", compressRate); } else { //alert(Orientation); if (Orientation != "" && Orientation != 1) { //alert('旋转处理'); switch (Orientation) { case 6://需要顺时针(向左)90度旋转 // alert('需要顺时针(向左)90度旋转'); rotateImg(this, 'left', canvas, canvas.width, canvas.height); break; case 8://需要逆时针(向右)90度旋转 // alert('需要顺时针(向右)90度旋转'); rotateImg(this, 'right', canvas, canvas.width, canvas.height); break; case 3://需要180度旋转 // alert('需要180度旋转'); rotateImg(this, 'right', canvas, canvas.width, canvas.height);//转两次 rotateImg(this, 'right', canvas, canvas.width, canvas.widheightth); break; } } var compressRate = getCompressRate(1, fileSize); base64 = canvas.toDataURL("image/jpeg", compressRate); } $("#hidpic").val(base64); if (isupLoad) { console.log("zhingxin") post(base64, sign, myCardId); } else { $(".jdtUP").hide(); } }; }; oReader.readAsDataURL(file); } } //对图片旋转处理 added by lzk function rotateImg(img, direction, canvas, w, h) { //alert(img); //最小与最大旋转方向,图片旋转4次后回到原方向 var min_step = 0; var max_step = 3; //var img = document.getElementById(pid); if (img == null) return; //img的高度和宽度不能在img元素隐藏后获取,否则会出错 var height = h; var width = w; //var step = img.getAttribute('step'); var step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋转到原位置,即超过最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋转角度以弧度值为参数 var degree = step * 90 * Math.PI / 180; var ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, w, h); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height, w, h); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height, w, h); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0, w, h); break; } } //计算压缩比率,size单位为MB function getCompressRate(allowMaxSize, fileSize) { var compressRate = 1; if (fileSize / allowMaxSize > 10) { compressRate = 0.5; } else if (fileSize / allowMaxSize > 5) { compressRate = 0.6; } else if (fileSize / allowMaxSize > 3) { compressRate = 0.7; } else if (fileSize > allowMaxSize) { compressRate = 0.8; } else { compressRate = 0.9; } return compressRate; } // 上传路径 function post(new_img_up) { var url = "";//后台地址 url = "{:U('Customer/uploadCardPost')}"; $.post(url, {'new_img_up': new_img_up}, function (data) { if (data.status == 200) { if (data.url) { toast("图片上传成功"); $(".jdtUP").hide(); } } else { $(".jdtUP").hide(); alert(data.msg); } }); }
后台处理:
/** * 图片上传 */ public function uploads($base64_img) { if ($base64_img == '') { $data['msg'] = '图片路径为空'; $data['status'] = 1002; return $data; } $up_dir = '.' . C('UPLOAD_DIR'); //存放在当前目录的upload文件夹下 if (!file_exists($up_dir)) { mkdir($up_dir, 0777); } $up_dir_son = $up_dir . date('Y-m-d') . '/'; if (!file_exists($up_dir_son)) { mkdir($up_dir_son, 0777); } if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)) { $type = $result[2]; $file_name = $this->getName(); if (in_array($type, array('pjpeg', 'jpeg', 'jpg', 'gif', 'bmp', 'png'))) { $new_file = $up_dir_son . $file_name . '.' . $type; if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))) { $img_path = str_replace('../../..', '', $new_file); $img_path = substr($img_path, 1); //保存图片到阿里云oss if ($_SESSION['wechat_member_id'] == 1) { $oss_img = $this->aliyun($img_path, $type); $data['oss_img'] = $oss_img;//成功之后可以删除本地文件 } $data['img_path'] = $img_path; $data['msg'] = '图片上传成功'; $data['status'] = 200; return $data; } else { $data['msg'] = '图片上传失败'; $data['status'] = 1007; return $data; } } else { $data['msg'] = '图片上传类型错误'; $data['status'] = 1008; return $data; } } else { $data['msg'] = '文件错误'; $data['status'] = 1009; return $data; } }
阿里云oss上传代码 sdk请自行下载,寻找自己合适的版本 https://help.aliyun.com/document_detail/32099.html?spm=a2c4g.11186623.6.778.H08z1z
/** * * 阿里云OSS图片上传
*/ public function aliyun($info = '', $type = 'jpg', $way = 'oss要保存的文件目录', $bucket = 'oss创建项目名称') { $accessKeyId = ''; //去阿里云后台获取秘钥 $accessKeySecret = ''; //去阿里云后台获取秘钥 $endpoint = ''; //你的阿里云OSS地址 $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint); // 判断bucketname是否存在,不存在就去创建 if (!$ossClient->doesBucketExist($bucket)) { $ossClient->createBucket($bucket); } //想要保存文件的名称 $file_name = $this->getName(); $object = $way . date('Y-m-d') . '/' . $file_name . '.' . $type; $file = '.' . $info; //文件路径,必须是本地的 try { $ossClient->uploadFile($bucket, $object, $file); } catch (OssException $e) { $e->getErrorMessage(); } return $object; } //文件命名 public function getName() { $rand_number = rand(10000, 99999); $file_name = date('His') . $rand_number; return $file_name; }